react-native-tab-navigator组件怎么用

小编给大家分享一下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

以上是“react-native-tab-navigator组件怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注亿速云行业资讯频道！