React Native react-navigation 导航使用详解(4)

日期：2020-05-11 栏目：程序人生浏览：次

import {StackNavigator,TabNavigator,TabBarBottom} from 'react-navigation'; 
import HomeScreen from './pages/HomePage'; 
import MineScreen from './pages/MinePage';

（3）定义TabNavigator：

const Tab = TabNavigator( 
 { 
  Home:{ 
   screen:HomeScreen, 
   navigationOptions:({navigation}) => ({ 
    tabBarLabel:'首页', 
    tabBarIcon:({focused,tintColor}) => ( 
     <TabBarItem 
      tintColor={tintColor} 
      focused={focused} 
      normalImage={require('./imgs/nav_fav@2x.png')} 
      selectedImage={require('./imgs/nav_fav_actived@3x.png')} 
     /> 
    ) 
   }), 
  }, 
 
  Mine:{ 
     screen:MineScreen, 
     navigationOptions:({navigation}) => ({ 
     tabBarLabel:'我', 
     tabBarIcon:({focused,tintColor}) => ( 
      <TabBarItem 
       tintColor={tintColor} 
       focused={focused} 
       normalImage={require('./imgs/tab_me_nor@3x.png')} 
       selectedImage={require('./imgs/tab_me_selected@2x.png')} 
      /> 
     ) 
    }), 
   }, 
  }, 
 
  { 
   tabBarComponent:TabBarBottom, 
   tabBarPosition:'bottom', 
   swipeEnabled:false, 
   animationEnabled:false, 
   lazy:true, 
   tabBarOptions:{ 
    activeTintColor:'#06c1ae', 
    inactiveTintColor:'#979797', 
    style:{backgroundColor:'#ffffff',}, 
    labelStyle: { 
       fontSize: 20, // 文字大小 
     }, 
   } 
    
  } 
 
 );

TabBarItem为封装的组件：

import React,{Component} from 'react'; 
import {Image} from 'react-native'; 
 
export default class TabBarItem extends Component { 
 
  render() { 
    return( 
      <Image source={ this.props.focused ? this.props.selectedImage : this.props.normalImage } 
        style={ { tintColor:this.props.tintColor,width:25,height:25 } } 
      /> 
    ) 
  } 
   
}

可以看到，我们定义了一个名称为【Tab】的TabNavigator的导航组件。在组件中，分为两层参数：

（1）第一层参数定义了要切换的界面，即【首页】、【我】两个界面组件，通过screen属性指定。并且通过navigationOptions属性设置相关属性参数。

（2）设置导航栏的属性参数。

TabNavigator定义好之后，需要用StackNavigator，顾名思义，StackNavigator就是以栈的方式来存放整个界面的，而

TabNavigator是作为一个界面内不同子界面之间切换。所以还需要我们定义StackNavigator：

const Navigator = StackNavigator( 
  
 { 
  Tab:{screen:Tab}, 
  Product:{screen:ProductScreen} 
 }, 
 
 { 
  navigationOptions:{ 
   headerBackTitle:null, 
   headerTintColor:'#333333', 
   showIcon:true, 
   swipeEnabled:false, 
   animationEnabled:false, 
  }, 
 
  mode:'card', 
 });

看起来和TabNavigator很相似，同样是指定了两个参数：

（1）指定要跳转的界面组件。同样是screen属性标识界面组件，不多赘述。

React Native react-navigation 导航使用详解(4)

相关推荐