接着上篇react-native-navigation步步深入之Android、ios配置篇，该篇会一步步开始构建一个app的主要架构，一个tab导航。
修改入口文件
找到项目根目录下的index.android.js或者ios平台对应的index.ios.js，修改里面的代码，在react-native(0.49)之前的版本，所有的示例代码都是直接写在index文件里面的，清空入口文件的所有内容，改成如下：
index.android.js
import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('navigation', () => App);
提示：但是在0.49之后的版本，默认把android和ios的入口都写到了一个index.js里面，而且里面已经写好了如下代码，就无需做任何修改，但是0.49版本之后的版本，我们需要把index.js复制两份，分别命名为index.android.js和index.ios.js。因为react-native-navigation还没有及时更新过来，还是默认从index.android.js和index.ios.js打包的。
编辑App.js
同样，不同的版本有些许区别，0.49之前的版本需要在跟目录创建App.js，而0.49之后的版本默认就存在，并且0.49之前版本index.android.js和index.ios.js中的代码在这里进行了综合。清空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: '车险报价',
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: '车险报价'
},
{
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中引入了一个函数（registerScreens），并且开始就执行了。接下来便是启动一个tab导航，下面有四个页面，这四个页面就是一般的rn页面，接下来就开始创建所需的文件。
注册所有的页面组件
在根目录中新建目录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);
}
这个文件便是引入所有的页面组件，并且在一个函数中注册所有的页面组件，供App.js中使用，当然这里注册的页面组件可以在app中任意地方使用，包括后面的页面跳转modal等等，我们都需要用到，具体用法后面介绍。
不过有代码洁癖的看到这样的代码总觉得不爽，这还只是四个tab页，如果一个app有几十上百个页面，我这里岂不是要copy几十上百遍，这里先放着，后面再进行优化，接下来继续创建app所需的四个tab页的组件。
创建tab页组件
在src/screens目录中创建如下四个组件，基本上都可以根据如下的结构进行修改，只是改下里面的class名称和内容罢了。
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>车险报价</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>
)
}
}
接下来，重新运行项目，便可以看到如下的app
现在，一个完整的项目总算成功的跑起来了，接下来我们就来优化下src/screens/index.js中的代码，最终优化后代码如下
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: '车险报价',
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: '车险报价'
},
{
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只有一个注册组件的函数，接收两个参数，一个是注册组件的名称前缀（可要可不要），一个就是页面组件的数组。
这仅仅是小编的方法，当然优化代码还有很多种，相信每个人都有不同的见解，哪一种最擅长，最习惯就用哪一种。
到此为止，用react-native-navigation正式跑起来了一个项目！接下来的文章将会继续介绍react-native-navigation的配置以及页面跳转啥的，总不能所有的app都是这吊样，总要根据设计图做界面调整的，期待下一篇文章继续介绍！
