要做的效果很简单,如下图所示:
使用基本好代码教程
1.引入组件
import TabNavigator from 'react-native-tab-navigator';
Github上的地址
2.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/movie_gray.png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/movie_red.png")} />} onPress={() => this.setState({ selectedTab: '电影' })}> <MoviePage/> // 这里放入页面组件 </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '音乐'} title="音乐" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require("../images/music_gray.png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/music_red.png")} />} onPress={() => this.setState({ selectedTab: '音乐' })}> <MusicPage /> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '图书'} title="图书" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require("../images/book_gray.png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/book_red.png")} />} onPress={() => this.setState({ selectedTab: '图书' })}> <BookPage /> </TabNavigator.Item> <TabNavigator.Item selected={this.state.selectedTab === '我的'} title="我的" titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={require("../images/my_gray.png")} />} renderSelectedIcon={() => <Image style={styles.icon} source={require("../images/my_red.png")} />} onPress={() => this.setState({ selectedTab: '我的' })}> <MyPage /> </TabNavigator.Item> </TabNavigator> </View> ); }
引入页面组件:
import MoviePage from './pages/MoviePage'; import MusicPage from './pages/MusicPage'; import BookPage from './pages/BookPage'; import MyPage from './pages/MyPage';
设置state状态机:
constructor(props){ super(props); this.state = { selectedTab:'电影' } }
引入基本样式:
const styles = StyleSheet.create({ container:{ flex:1, backgroundColor:'#fff' }, tabText:{ color:'#000000', fontSize:10 }, selectedTabText:{ color:'#D81E06' }, icon:{ width:20, height:20 } })
这个时候效果已经出来了,我们继续抽象组件:
将每一个栏目抽出来放到一个统一的方法中:
_renderTabarItems(selectedTab,icon,selectedIcon,Component){ return ( <TabNavigator.Item selected={this.state.selectedTab === selectedTab} title={selectedTab} titleStyle={styles.tabText} selectedTitleStyle={styles.selectedTabText} renderIcon={() => <Image style={styles.icon} source={icon} />} renderSelectedIcon={() => <Image style={styles.icon} source={selectedIcon} />} onPress={() => this.setState({ selectedTab: selectedTab })} > <Component /> </TabNavigator.Item> ) }
此时,render方法中就直接引用四个方法即可:
render() { return ( <View style={styles.container}> <TabNavigator> {this._renderTabarItems('电影',require('../img/movie_gray.png'),require('../img/movie_red.png'),MoviePage)} {this._renderTabarItems('音乐',require('../img/music_gray.png'),require('../img/music_red.png'),MusicPage)} {this._renderTabarItems('图书',require('../img/book_gray.png'),require('../img/book_red.png'),BookPage)} {this._renderTabarItems('我的',require('../img/my_gray.png'),require('../img/my_red.png'),MyPage)} </TabNavigator> </View> ); }
至此,已经初步完成。
组件的属性集合:
Props
TabNavigator props
prop | default | type | description |
---|---|---|---|
sceneStyle | inherited | object (style) | 场景样式,即Tab页容器的样式,可按View的style设置 |
tabBarStyle | inherited | object (style) | TabBar的样式,基本也可按照普通的style写法进行设置 |
tabBarShadowStyle | inherited | object (style) | TabBar阴影的样式,不过对于扁平化的设计,这个属性应该用处不大 |
hidesTabTouch | false | boolean | bool类型,即是否隐藏Tab按钮的按下效果 |
TabNavigator.Item props
prop | default | type | description |
---|---|---|---|
renderIcon | none | function | 即图标,但为function类型,所以这里需要用到Arrow Function |
renderSelectedIcon | none | function | 选中状态的图标,非必填,也是function类型 |
badgeText | none | string or number | 即Tab右上角的提示文字,可为String或Number,类似QQ中Tab右上角的消息提示,非必填 |
renderBadge | none | function | 提示角标渲染方式,function类型,类似render的使用,非必填 |
title | none | string | 标题,String类型,非必填 |
titleStyle | inherited | style | 标题样式,style类型,非必填 |
selectedTitleStyle | none | style | 选中标题样式,style类型,非必填 |
tabStyle | inherited | style | styling for tab |
selected | none | boolean | bool型,是否选中状态,可使用setState进行控制,默认false |
onPress | none | function | 即点击事件的回调函数,这里需要控制的是state |
allowFontScaling | false | boolean | bool型,是否允许字体缩放,默认false |
本文react-native-tab-navigator组件的基本使用示例代码到此结束。真正成功的人生,不在于成就的大小,而在于你是否努力地去实现自我,喊出自我的声音,走出属于自我的道路。小编再次感谢大家对我们的支持!