辣子鸡一步一爪印react native——导航TabNavigator，react-native-tab-navigator

1、使用代码如下，最后附上效果图，只是实现导航，home页面没法滑动，滑动的实现下节说明

import TabNavigator  from 'react-native-tab-navigator';//底部导航组件

constructor(props){
    super(props);
    this.state={
        selectedTab :'首页'
    }
}

render() {
    return (
        <View style={styles.Container}>
            <TabNavigator style={styles.tabBar} >
                <TabNavigator.Item

                    selected={this.state.selectedTab === '首页'}//控制当前tab是否是选中,实现导航

style={{padding:0,marginTop:0}} title="首页" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText}

                     //未选中状态下显示的图片

renderIcon={() => <Image style={styles.icon} source={require("./app/images/navtab/home.png")} />}

                    //选中状态下显示的图片

renderSelectedIcon={() => <Image style={styles.icon} source={require("./app/images/navtab/home_sel.png")} />} onPress={() => this.setState({ selectedTab: '首页' })}

                    >
                    <Home />{/*只能引入一个组件否则报错，代表点击菜单显示的页面(我引入了Home组件)*/}
                </TabNavigator.Item>
            </TabNavigator>

                   {/*//此处不能写其他组件，否则报错*/}

        </View>
    )

}

//样式

const styles = StyleSheet.create({
    Container: {
        flex: 1,
    },
    tabBar: {
        height: px2dp(10),
        alignItems:'center',
        justifyContent: 'center',
        backgroundColor: 'white'
    },
    tabText: {//图标的样式
        color: "#000000",
        fontSize: 13,
        height:5,
        width:15
    },
    selectedTabText: {
        color: "#999999",
        fontSize: 13
    },
    icon: {
        margin:0,
        width: 30,
        height: 30
    }
});

效果图如下：