react-native-tab-navigator组件的基本使用示例代码
更新时间：2017年09月07日 14:23:37 作者：随遇而安_2750
本篇文章主要介绍了react-native-tab-navigator组件的基本使用示例代码，具有一定的参考价值，有兴趣的可以了解一下
要做的效果很简单，如下图所示：
使用基本教程
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
| 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 |
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持脚本之家。
相关文章
在现代的Web应用程序中,获取用户的地理位置信息是一项常见的需求,本文我们将介绍如何在React应用程序中简便地获取用户的经纬度信息,需要的可以参考下2023-11-11
在开发React应用时,严格模式StrictMode可以帮助开发者捕捉到组件中的错误和潜在问题,安装React Developer Tools浏览器扩展检查组件的props和状态,直接修改以及分析性能,@testing-library/react和Cypress或Playwright等工具可以有效地测试React组件和执行端到端测试2024-10-10
这篇文章主要为大家介绍了useEffect支持async及await的使用方式示例详解，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2022-07-07
这篇文章主要介绍了react实现数据监听方式，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-08-08
这篇文章主要介绍了在 React 中使用 Redux 的 4 种写法,Redux 一般来说并不是必须的，只有在项目比较复杂的时候，比如多个分散在不同地方的组件使用同一个状态，本文就React使用 Redux的相关知识给大家介绍的非常详细，需要的朋友参考下吧2022-06-06
这篇文章主要为大家介绍了React 数据获取条件竞争原理解析，有需要的朋友可以借鉴参考下，希望能够有所帮助，祝大家多多进步，早日升职加薪2023-01-01
React实现createElement 和 cloneElement的区别
本文详细介绍了React中React.createElement和React.cloneElement两种方法的定义、用法、区别及适用场景,具有一定的参考价值,感兴趣的可以了解一下2024-09-09
这篇文章主要介绍了浅谈react性能优化的方法，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2018-09-09
在现代前端开发中,性能优化是一个不可忽视的重要环节,在 React 生态系统中,React Profiler 是一个强大的工具,下面我们来看看如何使用它来提升我们的 React 应用吧2025-03-03
useContext是React提供的一个钩子函数,用于在函数组件中访问和使用Context,useContext的实现原理涉及React内部的机制,本文给大家介绍react中的useContext具体实现,感兴趣的朋友一起看看吧2023-11-11
最新评论