react-native-tab-navigator底部导航
发布时间:2020-12-15 08:26:10 所属栏目:百科 来源:网络整理
导读:github地址:https://github.com/exponentjs/react-native-tab-navigator 终端运行:npm install react-native-tab-navigator –save下载 项目中导入 import TabNavigator from 'react-native-tab-navigator'; 在render方法当中使用它: render() { return (
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> ); }
其中可以自定义选中与未选中text和图标的样式,是不是很方便。
HomeComponent, MessageComponent,ContactComponent为子页面,也要先import 5. styles: let styles = StyleSheet.create({ container: { flex: 1 },tabText: { color: "#000000",fontSize: 13 },selectedTabText: { color: "#999999",icon: { width: 20,height: 20 } }); constructor(props){ super(props); this.state={ selectedTab:'首页',//默认页面为“首页” } } (编辑:李大同) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |