《ReactNative》之底部导航TabNavigator

来源：互联网发布：电子人单片机开发板编辑：程序博客网时间：2024/05/29 16:47

先看下效果吧

1.安装

npm install react-native-tab-navigator -save

2.使用

引入包

import TabNavigator from 'react-native-tab-navigator';

顶部是一个自定义的组件 TitleComponent，使用时引入即可。

代码简单，不作过多解释，直接看代码即可。

完整的代码

import React, { Component } from 'react';import {  AppRegistry,  Text,  View,  Navigator,  StyleSheet,  Image,  } from 'react-native';import TitleComponent from './app/comp/home_title';import TabNavigator from 'react-native-tab-navigator';class App extends Component{constructor(props){    super(props);    this.state = {      selectedTab:'home'    };  }render(){return(<View style={{flex:1}}><TitleComponent title="ReactNative"/><TabNavigator tabBarStyle={styles.tab} >        <TabNavigator.Item           selected={this.state.selectedTab === 'home'}           title="首页"           titleStyle={styles.app_title}           selectedTitleStyle={styles.selectedTabText}             renderIcon={() => <Image style={styles.app_img} source={require('./img/home_n.png')} />}           renderSelectedIcon={() => <Image style={styles.app_img} source={require('./img/home_p.png')} />}           //badgeText="10"           onPress={() => this.setState({ selectedTab: 'home'})}>                     <Page1/>        </TabNavigator.Item>        <TabNavigator.Item           selected={this.state.selectedTab === 'app'}           title="应用"           renderIcon={() => <Image style={styles.app_img} source={require('./img/app_n.png')} />}           renderSelectedIcon={() => <Image style={styles.app_img} source={require('./img/app_p.png')} />}            onPress={() => this.setState({ selectedTab: 'app'})}>                      <Page2/>                   </TabNavigator.Item>         <TabNavigator.Item           selected={this.state.selectedTab === 'my'}           title="我的"           renderIcon={() => <Image style={styles.app_img} source={require('./img/my_n.png')} />}           renderSelectedIcon={() => <Image style={styles.app_img} source={require('./img/my_p.png')} />}           onPress={() => this.setState({ selectedTab: 'my' })}>            <Page3/>        </TabNavigator.Item>      </TabNavigator>     </View>);}}class Page1 extends Component{render(){return(<View style={styles.center}><Text style={{fontSize:20,}}>我是page1</Text></View>);}}class Page2 extends Component{render(){return(<View style={styles.center}><Text style={[{fontSize:20},styles.blue]}>我是page2</Text></View>);}}class Page3 extends Component{render(){return(<View style={styles.center}><Text style={[{fontSize:20},styles.red]}>我是page3</Text></View>);}}const styles=StyleSheet.create({ tab: {    height: 54,    backgroundColor: '#eee',    alignItems: 'center'  },  app_img:{    width:30,    height:30,  },  selectedTabText:{  color:'orange',  },  center:{  flex:1,  justifyContent:'center',  alignItems:'center',  },  red:{  color:'#f00',  },  blue:{  color:'#00bfff'  }});AppRegistry.registerComponent('RN', () => App);

顶部自定义组件完整代码

import React,{Component} from 'react';import {View,  Text,  Image,  StyleSheet,  ToastAndroid,  TouchableHighlight} from 'react-native';var Dimensions = require('Dimensions');var {width} = Dimensions.get('window');var leftImg;export default class TitleComponent extends Component{  constructor(props){    super(props);  }  componentWillMount(){    leftImg = require('../../img/menu.png');  }    render(){    let leftImg = require('../../img/menu.png');    if(this.props.leftImg==='back'){      leftImg = require('../../img/back_n.png')    }    return(      <View>        <Image style={styles.container} source={require('../../img/title_background.png')}>          <TouchableHighlight  style={styles.leftImg}underlayColor='#f0f0f0' onPress={this.props.back}>            <View>              <Image style={[styles.img,{marginLeft:10,width:20,height:20,}]}source={leftImg}/>            </View>          </TouchableHighlight>          <View style={styles.titleCenter}>            <Text style={styles.text}>{this.props.title}</Text>          </View>          <View style={styles.rightImg}>                      </View>        </Image>      </View>    );  }}const styles = StyleSheet.create({  container:{    height:50,    width:width,    flexDirection:'row',  },  leftImg:{    flex:1,    justifyContent:'center',    alignItems:'center',  },  img:{    width:25,    height:25,  },  rightImg:{    flex:1,  },  titleCenter:{    flex:6,    justifyContent:'center',    alignItems:'center',  },  text:{    color:'#fff',    fontSize:20,  },});

2 0