为了规范代码管理，现将app代码全部放入app文件夹中，操作如下：
开发环境配置：https://www.jianshu.com/p/970c44cf800e
初始化项目：RNTestProject
react-native init RNTestProject
react-native init RNTestProject --verbose --version 0.22.2 //使用特定版本的react-native依赖初始化项目
创建一个app文件夹和app.js文件，如图：
创建app文件夹.png
删掉上图中默认创建的App.js文件，修改默认创建的index.js文件，如图：
原图.png
修改.png
import App from './app/app.js';
首先给项目集成三方库react-native-router-flux：https://www.jianshu.com/p/68df640242c2
在app.js文件中输入如下：
import React, { Component } from 'react'
import {
Platform,
StyleSheet,
Text,
View,
NativeModules,
Modal,
Button,
Image,
} from 'react-native'
import { Scene, Actions } from 'react-native-router-flux'
import { TabNavigator,TabBarBottom } from 'react-navigation';
import Home from './pages/home/index'
import Category from './pages/category/index'
import ShoppingCart from './pages/shoppingCart/index'
import Mine from './pages/mine/index'
class Root extends React.Component {
render() {
return (
// <Router scenes={scenes} />
<MainScreenNavigator />
)
}
}
const scenes = Actions.create(
<Scene key='root'>
<Scene key='Home' component={Home} title='主页' />
<Scene key='Category' component={Category} title='分类' />
<Scene key='ShoppingCart' component={ShoppingCart} title='购物车' />
<Scene key='Mine' component={Mine} hideNavBar />
</Scene>
)
const MainScreenNavigator = TabNavigator({
Home: {
screen: Home,
navigationOptions: {
tabBarLabel: '首页',
tabBarIcon: ({ tintColor, focused }) => {
return focused ? <Image source={require('./images/home_select.png')} style={styles.tabBarImage}/> : <Image source={require('./images/home.png')} style={[styles.tabBarImage,{tintColor: tintColor}]}/>
}
}
},
Category: {
screen: Category,
navigationOptions: {
tabBarLabel: '分类',
tabBarIcon: ({ tintColor, focused }) => {
return focused ? <Image source={require('./images/category_select.png')} style={styles.tabBarImage}/> : <Image source={require('./images/category.png')} style={[styles.tabBarImage,{tintColor: tintColor}]}/>
}
}
},
ShoppingCart: {
screen: ShoppingCart,
navigationOptions: {
tabBarLabel: '购物车',
tabBarIcon: ({ tintColor, focused }) => {
return focused ? <Image source={require('./images/shoppingCart_select.png')} style={styles.tabBarImage}/> : <Image source={require('./images/shoppingCart.png')} style={[styles.tabBarImage,{tintColor: tintColor}]}/>
}
}
},
Mine: {
screen: Mine,
navigationOptions: {
tabBarLabel: '我的',
tabBarIcon: ({ tintColor, focused }) => {
return focused ? <Image source={require('./images/mine_select.png')} style={styles.tabBarImage}/> : <Image source={require('./images/mine.png')} style={[styles.tabBarImage,{tintColor: tintColor}]}/>
}
}
}
},
{
tabBarComponent:TabBarBottom, // 为了适配安卓添加
tabBarPosition: 'bottom', // android 默认显示在顶部，ios默认显示在底部
swipeEnabled: false,
animationEnabled: false,
showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
tabBarOptions:{
activeTintColor: '#ffad16', // 选中的颜色
inactiveTintColor: '#333', // 不选中的颜色
showIcon: true, // android 默认不显示 icon, 需要设置为 true 才会显示
style: {
height: 49, //iPhone X 49 + 34
paddingBottom: 0, //iPhone X 34
backgroundColor: 'white',
padding: 1,
// borderTopColor: 'lightgray',
shadowColor: 'lightgray',
shadowOffset: {width: 0, height: 0},
shadowOpacity: 10,
shadowRadius: 2,
},
labelStyle: {
fontSize: 11
},
tabStyle: { // 设置底部图标的样式
backgroundColor: 'white'
}
}
})
// 定义样式
const styles = StyleSheet.create({
tabBarImage: {
width: 24,
height: 24,
}
})
export default Root
运行iOS模拟器，效果如下图：
iOS模拟器效果.png
未完待续...
