接著上篇react-native-navigation步步深入之Android兼蕊、ios配置篇集侯，該篇會(huì)一步步開始構(gòu)建一個(gè)app的主要架構(gòu)养筒，一個(gè)tab導(dǎo)航砌函。
修改入口文件
找到項(xiàng)目根目錄下的index.android.js或者ios平臺(tái)對(duì)應(yīng)的index.ios.js斩披，修改里面的代碼，在react-native(0.49)之前的版本讹俊，所有的示例代碼都是直接寫在index文件里面的垦沉，清空入口文件的所有內(nèi)容，改成如下：
index.android.js
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('navigation', () => App);
提示：但是在0.49之后的版本仍劈，默認(rèn)把a(bǔ)ndroid和ios的入口都寫到了一個(gè)index.js里面厕倍，而且里面已經(jīng)寫好了如下代碼，就無需做任何修改贩疙，但是0.49版本之后的版本讹弯，我們需要把index.js復(fù)制兩份，分別命名為index.android.js和index.ios.js这溅。因?yàn)閞eact-native-navigation還沒有及時(shí)更新過來组民，還是默認(rèn)從index.android.js和index.ios.js打包的。
編輯App.js
同樣悲靴，不同的版本有些許區(qū)別臭胜，0.49之前的版本需要在跟目錄創(chuàng)建App.js，而0.49之后的版本默認(rèn)就存在，并且0.49之前版本index.android.js和index.ios.js中的代碼在這里進(jìn)行了綜合耸三。清空App.js乱陡，添加如下代碼：
import { Navigation } from 'react-native-navigation';
import { registerScreens } from './src/screens';
registerScreens();
Navigation.startTabBasedApp({
tabs: [
{
label: '首頁',
screen: 'app.HomeScreen', // this is a registered name for a screen
icon: require('./src/assets/images/nav1.png'),
selectedIcon: require('./src/assets/images/nav1_active.png'), // iOS only
title: '首頁'
},
{
label: '客戶管理',
screen: 'app.OfferScreen', // this is a registered name for a screen
icon: require('./src/assets/images/nav2.png'),
selectedIcon: require('./src/assets/images/nav2_active.png'), // iOS only
title: '客戶管理'
},
{
label: '車險(xiǎn)報(bào)價(jià)',
screen: 'app.CustomerScreen', // this is a registered name for a screen
icon: require('./src/assets/images/nav3.png'),
selectedIcon: require('./src/assets/images/nav3_active.png'), // iOS only
title: '車險(xiǎn)報(bào)價(jià)'
},
{
label: '我的',
screen: 'app.MeScreen',
icon: require('./src/assets/images/nav4.png'),
selectedIcon: require('./src/assets/images/nav4_active.png'), // iOS only
title: '我的'
}
]
});
從以上代碼來看，我們從src/screens/index.js中引入了一個(gè)函數(shù)（registerScreens）仪壮，并且開始就執(zhí)行了憨颠。接下來便是啟動(dòng)一個(gè)tab導(dǎo)航，下面有四個(gè)頁面睛驳，這四個(gè)頁面就是一般的rn頁面烙心，接下來就開始創(chuàng)建所需的文件。
注冊(cè)所有的頁面組件
在根目錄中新建目錄src乏沸，并且新建目錄screens淫茵，新建index.js，具體代碼如下：
import { Navigation } from 'react-native-navigation';
import HomeScreen from './HomeScreen';
import MeScreen from './MeScreen';
import OfferScreen from './OfferScreen';
import CustomerScreen from './CustomerScreen';
// register all screens of the app (including internal ones)
export function registerScreens() {
Navigation.registerComponent('app.HomeScreen', () => HomeScreen);
Navigation.registerComponent('app.MeScreen', () => MeScreen);
Navigation.registerComponent('app.OfferScreen', () => OfferScreen);
Navigation.registerComponent('app.CustomerScreen', () => CustomerScreen);
}
這個(gè)文件便是引入所有的頁面組件蹬跃，并且在一個(gè)函數(shù)中注冊(cè)所有的頁面組件匙瘪，供App.js中使用，當(dāng)然這里注冊(cè)的頁面組件可以在app中任意地方使用蝶缀，包括后面的頁面跳轉(zhuǎn)modal等等丹喻，我們都需要用到，具體用法后面介紹翁都。
不過有代碼潔癖的看到這樣的代碼總覺得不爽碍论，這還只是四個(gè)tab頁，如果一個(gè)app有幾十上百個(gè)頁面柄慰，我這里豈不是要copy幾十上百遍鳍悠，這里先放著，后面再進(jìn)行優(yōu)化坐搔，接下來繼續(xù)創(chuàng)建app所需的四個(gè)tab頁的組件藏研。
創(chuàng)建tab頁組件
在src/screens目錄中創(chuàng)建如下四個(gè)組件，基本上都可以根據(jù)如下的結(jié)構(gòu)進(jìn)行修改概行，只是改下里面的class名稱和內(nèi)容罷了蠢挡。
HomeScreen.js
import React, {Component} from 'react';
import {
View,
Text
} from 'react-native';
export default class HomeScreen extends Component {
render () {
return (
<View>
<Text>首頁</Text>
</View>
)
}
}
CustomerScreen.js
import React, {Component} from 'react';
import {
View,
Text
} from 'react-native';
export default class CustomerScreenextends Component {
render () {
return (
<View>
<Text>客戶管理</Text>
</View>
)
}
}
OfferScreen.js
import React, {Component} from 'react';
import {
View,
Text
} from 'react-native';
export default class OfferScreenextends Component {
render () {
return (
<View>
![Uploading Video_2017-10-18_152100_528946.gif . . .]
<Text>車險(xiǎn)報(bào)價(jià)</Text>
</View>
)
}
}
MeScreen.js
import React, {Component} from 'react';
import {
View,
Text
} from 'react-native';
export default class MeScreen extends Component {
render () {
return (
<View>
<Text>我的</Text>
</View>
)
}
}
接下來，重新運(yùn)行項(xiàng)目凳忙，便可以看到如下的app
現(xiàn)在业踏，一個(gè)完整的項(xiàng)目總算成功的跑起來了，接下來我們就來優(yōu)化下src/screens/index.js中的代碼涧卵，最終優(yōu)化后代碼如下
src/screens/index.js
import { Navigation } from 'react-native-navigation';
export function registerScreens(tag, components) {
components.map((item, index) => {
Navigation.registerComponent(tag + '.' + item.name, () => item)
})
}
App.js
import { Navigation } from 'react-native-navigation';
import { registerScreens } from './src/screens';
import HomeScreen from './src/screens/HomeScreen';
import MeScreen from './src/screens/MeScreen';
import OfferScreen from './src/screens/OfferScreen';
import CustomerScreen from './src/screens/CustomerScreen';
const components = [
HomeScreen,
MeScreen,
OfferScreen,
CustomerScreen
];
registerScreens('app', components);
Navigation.startTabBasedApp({
tabs: [
{
label: '首頁',
screen: 'app.HomeScreen', // this is a registered name for a screen
icon: require('./src/assets/images/nav1.png'),
selectedIcon: require('./src/assets/images/nav1_active.png'), // iOS only
title: '首頁'
},
{
label: '客戶管理',
screen: 'app.OfferScreen', // this is a registered name for a screen
icon: require('./src/assets/images/nav2.png'),
selectedIcon: require('./src/assets/images/nav2_active.png'), // iOS only
title: '客戶管理'
},
{
label: '車險(xiǎn)報(bào)價(jià)',
screen: 'app.CustomerScreen', // this is a registered name for a screen
icon: require('./src/assets/images/nav3.png'),
selectedIcon: require('./src/assets/images/nav3_active.png'), // iOS only
title: '車險(xiǎn)報(bào)價(jià)'
},
{
label: '我的',
screen: 'app.MeScreen',
icon: require('./src/assets/images/nav4.png'),
selectedIcon: require('./src/assets/images/nav4_active.png'), // iOS only
title: '我的'
}
]
});
這樣堡称，我們把所有的組件引用全部放到App.js里面，src/screens/index.js只有一個(gè)注冊(cè)組件的函數(shù)艺演，接收兩個(gè)參數(shù)却紧，一個(gè)是注冊(cè)組件的名稱前綴（可要可不要）桐臊，一個(gè)就是頁面組件的數(shù)組。
這僅僅是小編的方法晓殊，當(dāng)然優(yōu)化代碼還有很多種断凶，相信每個(gè)人都有不同的見解，哪一種最擅長(zhǎng)巫俺，最習(xí)慣就用哪一種认烁。
到此為止，用react-native-navigation正式跑起來了一個(gè)項(xiàng)目介汹！接下來的文章將會(huì)繼續(xù)介紹react-native-navigation的配置以及頁面跳轉(zhuǎn)啥的却嗡，總不能所有的app都是這吊樣，總要根據(jù)設(shè)計(jì)圖做界面調(diào)整的嘹承，期待下一篇文章繼續(xù)介紹窗价！
