react-native-tab-navigator的用法

通过react-native-tab-navigator实现下面这样的底部Tab切换

安装

npm install react-native-tab-navigator --save

属性

• TabNavigator 属性

属性名	描述
sceneStyle	切换的每一屏的样式，等同于每一屏根View的样式
tabBarStyle	TabBar的样式，控制Item的样式，和tabStyle有点类似
tabBarShadowStyle	TabBar阴影的样式
hidesTabTouch	true关闭点击的透明变化效果，false反之

如使用tabBarStyle设置居中

  <TabNavigator
          tabBarStyle={{alignItems:'center'}}
          >

        </TabNavigator>

使用tabStyle设置居中则为

<TabNavigator.Item
            tabStyle={{alignSelf:'center'}}
            >
        </TabNavigator.Item>

• TabNavigator.Item 属性

属性名	描述
renderIcon	TabBar未选中的Icon
renderSelectedIcon	TabBar选中的Icon
badgeText	右上角提示的文字
renderBadge	提示角标渲染方式，function类型
title	tabBar的标题
titleStyle	TabBar未选中的标题样式
selectedTitleStyle	TabBar选中的标题样式
tabStyle	设置TabBar的样式
selected	是否选中
onPress	点击事件的回调函数，控制state
allowFontScaling	是否允许字体缩放，默认false

实现

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  Image
} from 'react-native';
import TabNavigator from 'react-native-tab-navigator';

import Home from '../src/Home';
import Article from '../src/Article';
import Order from '../src/Order';
import Owner from '../src/Owner';

const dataSource = [
                    {icon:require('../image/home_n.png'),selectedIcon:require('../image/home_s.png'),tabPage:'Home',tabName:'首页',component:Home},
                    {icon:require('../image/article_n.png'),selectedIcon:require('../image/article_s.png'),tabPage:'Article',tabName:'文章',component:Article},
                    {icon:require('../image/order_n.png'),selectedIcon:require('../image/order_s.png'),tabPage:'Order',tabName:'订单',component:Order},
                    {icon:require('../image/owner_n.png'),selectedIcon:require('../image/owner_s.png'),tabPage:'Owner',tabName:'我的',component:Owner}
                 ]
var navigation = null;
type Props = {};
export default class App extends Component<Props> {
  constructor(props){
    super(props);
    navigation = this.props.navigation;
    this.state = {
      selectedTab:'Home'
    }
  }

  render() {
    let tabViews = dataSource.map((item,i) => {
      return (
          <TabNavigator.Item
            title={item.tabName}
            selected={this.state.selectedTab===item.tabPage}
            titleStyle={{color:'black'}}
            selectedTitleStyle={{color:'#7A16BD'}}
            renderIcon={()=><Image style={styles.tabIcon} source={item.icon}/>}
            renderSelectedIcon = {() => <Image style={styles.tabIcon} source={item.selectedIcon}/>}
            tabStyle={{alignSelf:'center'}}
            onPress = {() => {this.setState({selectedTab:item.tabPage})}}
            key={i}
            >
            <item.component navigation={navigation}/>
        </TabNavigator.Item>
      );
    })
    return (
      <View style={styles.container}>
        <TabNavigator
          hidesTabTouch={true}
          >
            {tabViews}
        </TabNavigator>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
  },
  tabIcon:{
    width:23,
    height:23,
  }
});

Home.js

import React,{ Component } from 'react';
import {
  StyleSheet,
  Text,
  View
} from 'react-native';

type props = {}

export default class Home extends Component<props>{
  constructor(props){
    super(props);

  }
  render(){
    return (
      <View style={styles.container}>
        <Text style={styles.text}>首页</Text>
      </View>
    );
  }
}
const styles = StyleSheet.create({
    container:{
      flex:1,
      justifyContent:'center',
      alignItems:'center',
      backgroundColor:'grey'
    },
    text:{
      fontSize:30,
      color:'black'
    }
});

其他三个则类似

注意

TypeError: undefined is not an object (evaluating ‘this.props.navigation.navigate’)

通过这个传递navigation，然后在每一屏里面进行跳转。

<item.component navigation={navigation}/>