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.Itemselected={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 } });