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

要做的效果很简单，如下图所示：使用基本教程1.引入组件importTabNavigatorfrom'react-native-tab-nav

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

使用基本教程

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

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