react-native-tab-navigator组件的基本使用

要做的效果很简单，如下图所示：

效果图

使用基本教程

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

TabNavigator.Item props