要做的效果很简单，如下图所示：
使用基本教程
1.引入组件
import TabNavigator from 'react-native-tab-navigator';
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