小编给大家分享一下react-native-tab-navigator组件怎么用，相信大部分人都还不怎么了解，因此分享这篇文章给大家参考一下，希望大家阅读完这篇文章后大有收获，下面让我们一起去了解一下吧！
我们提供的服务有：网站建设、网站制作、微信公众号开发、网站优化、网站认证、凤县ssl等。为成百上千企事业单位解决了网站和推广的问题。提供周到的售前咨询和贴心的售后服务，是有科学管理、有技术的凤县网站制作公司
要做的效果很简单，如下图所示：
使用基本教程
1.引入组件
import TabNavigator from 'react-native-tab-navigator';
Github上的地址
2.render方法中返回：
render() {
return (
}
renderSelectedIcon={() => }
onPress={() => this.setState({ selectedTab: '电影' })}>
// 这里放入页面组件
}
renderSelectedIcon={() => }
onPress={() => this.setState({ selectedTab: '音乐' })}>
}
renderSelectedIcon={() => }
onPress={() => this.setState({ selectedTab: '图书' })}>
}
renderSelectedIcon={() => }
onPress={() => this.setState({ selectedTab: '我的' })}>
);
}引入页面组件：
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 (
}
renderSelectedIcon={() => }
onPress={() => this.setState({ selectedTab: selectedTab })}
>
)
}此时，render方法中就直接引用四个方法即可：
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 | | 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 |
以上是“react-native-tab-navigator组件怎么用”这篇文章的所有内容，感谢各位的阅读！相信大家都有了一定的了解，希望分享的内容对大家有所帮助，如果还想学习更多知识，欢迎关注创新互联行业资讯频道！
分享文章：react-native-tab-navigator组件怎么用
标题URL：
http://cdkjz.cn/article/igedgj.html
