react-native创建底部导航标签页 react-navigation创建底部导航路由
1.先创建导航对应的组件页面
例如:有2个tab页面组件 Home,User ,
home/index.js
class Home extends React.component{
render(){
return(
<View><Text>主页</Text></View>
)
}
}
export Home
/user/index.js
class User extends React.component{
render(){
return(
<View><Text>我的</Text></View>
)
}
}
export User
2.引入react-navigation依赖并创建导航路由
import { createBottomTabNavigator } from 'react-navigation';
import Home from './home';
import Userfrom './user';
export default createBottomTabNavigator({
home: {
screen: Home,
navigationOptions:{
tabBarLabel: label,//tab文字
tabBarVisible: !navigation.state.index,
tabBarIcon: ({ focused }) => (
<Image source={focused ? 选中的图片: 默认图片} style={{width: 16,height: 21}} />
)
}
},
user: {
screen: User,
navigationOptions:...
},{
tabBarPosition: 'bottom',
activeTintColor:'',//自定义
inactiveTintColor: '',//自定义
});
//默认加载的是第一个路由