react-native创建底部导航标签页(五)

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: '',//自定义
});
//默认加载的是第一个路由