react-native-tab-navigator组件的基本使用示例代码

<p style="text-align: left">要做的效果很简单，如下图所示：

<p style="text-align: center">

使用基本教程

1.引入组件

rush:js;"> import TabNavigator from 'react-native-tab-navigator';

nofollow" target="_blank" href="https://github.com/happypancake/react-native-tab-navigator">Github上的地址

2.render方法中返回：

rush:js;"> render() { return ( } renderSelectedIcon={() => } onPress={() => this.setState({ selectedTab: '电影' })}> // 这里放入页面组件 } renderSelectedIcon={() => } onPress={() => this.setState({ selectedTab: '音乐' })}> } renderSelectedIcon={() => } onPress={() => this.setState({ selectedTab: '图书' })}> } renderSelectedIcon={() => } onPress={() => this.setState({ selectedTab: '我的' })}> ); }

引入页面组件：

rush:js;"> import MoviePage from './pages/MoviePage'; import MusicPage from './pages/MusicPage'; import BookPage from './pages/BookPage'; import MyPage from './pages/MyPage';

设置state状态机：

rush:js;"> constructor(props){ super(props); this.state = { selectedTab:'电影' } }

引入基本样式：

rush:js;"> const styles = StyleSheet.create({ container:{ flex:1,backgroundColor:'#fff' },tabText:{ color:'#000000',fontSize:10 },selectedTabText:{ color:'#D81E06' },icon:{ width:20,height:20 } })

这个时候效果已经出来了，我们继续抽象组件：

将每一个栏目抽出来放到一个统一的方法中：

rush:js;"> _renderTabarItems(selectedTab,icon,selectedIcon,Component){ return ( } renderSelectedIcon={() => } onPress={() => this.setState({ selectedTab: selectedTab })} > )

}

此时，render方法中就直接引用四个方法即可：

rush:js;"> render() { return ( {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)} ); }

至此，已经初步完成。

组件的属性集合：

Props

TabNavigator props

prop default type description nestyle属性应该用处不大效果

TabNavigator.Item props

prop default type description 提示文字，可为String或Number，类似QQ中Tab右上角的消息提示，非必填提示角标渲染方式，function类型，类似render的使用，非必填标题，String类型，非必填标题样式，style类型，非必填标题样式，style类型，非必填默认false函数，这里需要控制的是state默认false

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持编程之家。