要做的效果很简单，如下图所示：
使用基本教程
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 |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持Devmax。