360SDN.COM

react native android使用react-native-tab-navigator来做底部导航tabbar(1)

来源:  2017-06-18 16:42:23    评论:0点击:

  1. github上的地址:https://github.com/exponentjs/react-native-tab-navigator
  2. 终端运行:npm install react-native-tab-navigator –save下载
  3. 导入,类似安卓,
    import TabNavigator from 'react-native-tab-navigator';
  4. 在render方法当中使用它:
render() {
        return (
            <View style={styles.container} >
                <TabNavigator>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '首页'}
                        title="首页"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("/images/ic_home_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("/images/ic_home_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '首页' })}>
                        <HomeComponent/>
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '消息'}
                        title="消息"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("/images/ic_message_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("/images/ic_message_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '消息' })}>
                        <MessageComponent />
                    </TabNavigator.Item>
                    <TabNavigator.Item
                        selected={this.state.selectedTab === '联系人'}
                        title="联系人"
                        titleStyle={styles.tabText}
                        selectedTitleStyle={styles.selectedTabText}
                        renderIcon={() => <Image style={styles.icon} source={require("/images/ic_contacts_normal.png")} />}
                        renderSelectedIcon={() => <Image style={styles.icon} source={require("/images/ic_contacts_checked.png")} />}
                        onPress={() => this.setState({ selectedTab: '联系人' })}>
                        <ContactComponent />
                    </TabNavigator.Item>
                </TabNavigator>
            </View>
        );
    }
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34

其中可以自定义选中与未选中text和图标的样式,是不是很方便。
HomeComponent, MessageComponent,ContactComponent为子页面,也要先import
5. styles:

let styles = StyleSheet.create({
    container: {
        flex: 1
    },
    tabText: {
        color: "#000000",
        fontSize: 13
    },
    selectedTabText: {
        color: "#999999",
        fontSize: 13
    },
    icon: {
        width: 20,
        height: 20
    }
});
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9

这样就大功告成了

来源:http://blog.csdn.net/qq_27275015/article/details/51078302

为您推荐

友情链接 |九搜汽车网 |手机ok生活信息网|ok生活信息网|ok微生活
 Powered by www.360SDN.COM   京ICP备11022651号-4 © 2012-2016 版权