React Native react-navigation

 
 

  
  
什么是react-navigation?

  
  
react-native从开源至今，一直存在几个无法解决的毛病，偶尔就会复发让人隐隐作痛，提醒你用的不是原生，其中包括列表的复用问题，导航跳转不流畅的问题等等。

终于facebook坐不住了，在前一段时间开始推荐使用react-navigation，并且在0.44发布的时将之前一直存在的Navigator废弃了。

react-navigation是致力于解决导航卡顿，数据传递，Tabbar和navigator布局，支持redux。虽然现在功能还不完善，但基本是可以在项目中推荐使用的。
 
 
  
  

   
   
属性

   
   
react-navigation分为三个部分。

StackNavigator类似顶部导航条，用来跳转页面和传递参数。

TabNavigator类似底部标签栏，用来区分模块。

DrawerNavigator抽屉，类似从App左侧滑出一个页面，在这里不做讲解。

下面会分开讲解官网提供的配置方法，但顺序可能会官网不一样。
   
   


   
   

   
   
测试TabNavigator、StackNavigator和DrawerNavigator
   
   

   
   

   
   
StackNavigator
StackNavigator 组件采用堆栈式的页面导航来实现各个界面跳转。它的构造函数：
    
    

     
     
StackNavigator(RouteConfigs, StackNavigatorConfig)
    
    
RouteConfigs
RouteConfigs 参数表示各个页面路由配置，类似于android原生开发中的 AndroidManifest.xml ，它是让导航器知道需要导航的路由对应的页面。
    
    

     
     
const StackRouteConfigs = {
    Tab: {
        screen: Tab,
    }
};
     
     
const Tab = TabNavigator(TabRouteConfigs, TabNavigatorConfigs);
其中tab是导航栏，tab将作为一个路由在stacknavigation中配置，tab中的routeconfigs 包含了 各个导航中的页面，
    
    
StackNavigatorConfig
StackNavigatorConfig 参数表示导航器的配置，包括导航器的初始页面、各个页面之间导航的动画、页面的配置选项等等：
const StackNavigatorConfigs = {
    initialRouteName: 'Tab',
    navigationOptions: {
        title: '标题',
        headerStyle: {backgroundColor: '#5da8ff'},
        headerTitleStyle: {color: '#333333'},
    }
页面的配置选项 navigationOptions 通常还可以在对应页面中去静态配置，比如在 HomePage 页面中：
class App extends Component {

   static navigationOptions={
       title: '首页',//设置标题内容
       header:{
           backTitle: ' ',//返回按钮标题内容（默认为上一级标题内容）
       }
   }


   
   

   
   
同样地，在页面里面采用静态的方式配置 navigationOptions 中的属性，会覆盖 StackNavigator 构造函数中两个参数 RouteConfigs 和 StackNavigatorConfig 配置的 navigationOptions 里面的对应属性。 navigationOptions 中属性的优先级是：
   
   
页面中静态配置 > RouteConfigs > StackNavigatorConfig
   
   
有了 RouteConfigs 和 StackNavigatorConfig 两个参数，就可以构造出一个导航器组件 StackNavigator ，直接引用该组件：
   
   

    
    

   
   
   
   
const Navigator = StackNavigator(RouteConfigs, StackNavigatorConfig);

export default class MainComponent extends Component {
    render() {
        return (
            <Navigator/>
        )
    };
}
   
   

    
    
    
    
 
    
    
已经配置好导航器以及对应的路由页面了，但是要完成页面之间的跳转，还需要 navigation。
    
    
navigation
    
    
在导航器中的每一个页面，都有 navigation 属性，该属性有以下几个属性/方法：
    
    

     
     
navigate - 跳转到其他页面
state - 当前页面导航器的状态
setParams - 更改路由的参数
goBack - 返回
dispatch - 发送一个action
    
    
    
    
 
    
    

navigete
    
    

    
    
调用这个方法可以跳转到导航器中的其他页面，此方法有三个参数：
    
    

     
     

      
      
     
     
     
     
— routeName 导航器中配置的路由名称

— params 传递参数到下一个页面

— action action

比如： this.props.navigation.navigate('Find', {param: 'i am the param'});
     
     

      
      
     
     
    
    
    
    


    
    
export  default class Homescreen extends Component{
    render(){
        const {navigate}=this.props.navigation;
        return(
            <View style={styles.container}>
                <Text style={{padding:10}}>Hello, Navigation!</Text>
                <Button
                    onPress={() => navigate('Chat',{user:'Sybil'})}
                    title="点击跳转"/>
            </View>
        )
    }
}
    
    

    
    
state
    
    
state 里面包含有传递过来的参数 params 、 key 、路由名称 routeName ，打印log可以看得到：
    
    

     
     
{ 
  params: { param: 'i am the param' },
  key: 'id-1500546317301-1',
  routeName: 'Mine' 
}
    
    
    
    

    
    
render() {
    const {params,key,routeName} = this.props.navigation.state;
    return (
        <View style={{backgroundColor:'#fff',flex:1}}>
            <Text style={{padding:20}}>Chat with {params.user}{key}{routeName}</Text>
        </View>

    );
 
    
    

    
    
setParams
    
    
更改当前页面路由的参数，比如可以用来更新头部的按钮或者标题。
    
    

     
     
componentDidMount() {
    this.props.navigation.setParams({param:'i am the new param'})
}
    
    
    
    
 
    
    
goBack
    
    
回退，可以不传，也可以传参数，还可以传 null 。
    
    

     
     
this.props.navigation.goBack();       // 回退到上一个页面
this.props.navigation.goBack(null);   // 回退到任意一个页面
this.props.navigation.goBack('Home'); // 回退到Home页面
     
     

      
      

     
     
    
    
   
   
   
   

    
    
TabNavigator
    
    
TabNavigator ，即是Tab选项卡，类似于原生 android 中的 TabLayout ，它的构造函数：
    
    

     
     
TabNavigator(RouteConfigs, TabNavigatorConfig)
     
     

      
      

     
     
    
    
    
    
RouteConfigs
    
    
路由配置和 StackNavigator 中是一样的，配置路由以及对应的 screen 页面， navigationOptions 为对应路由页面的配置选项：
    
    

    
    
const TabRouteConfigs = {
    Home: {
        screen: Homescreen,
        navigationOptions: ({navigation}) => ({
            tabBarLabel: '首页',
            tabBarIcon:({focused,tintColor})=><Image style={styles.tabIcon} source={focused?require('./asset/tab_logo_active.png'):require('./asset/tab_logo.png')}/>
        }
        ),
    },
    NearBy: {
        screen: NearByScreen,
        navigationOptions: {
            tabBarLabel: '附近',
            tabBarIcon:({focused,tintColor})=><Image style={styles.tabIcon} source={focused?require('./asset/tab_logo_active.png'):require('./asset/tab_logo.png')}/>
        }
    }
    ,
    Mine: {
        screen: MineScreen,
        navigationOptions: {
            tabBarLabel: '我的',
            tabBarIcon:({focused,tintColor})=><Image style={styles.tabIcon} source={focused?require('./asset/tab_logo_active.png'):require('./asset/tab_logo.png')}/>
        }
    }
};

    
    
TabNavigatorConfig
    
    

     
     这个参数用来配置 选项卡的数据
    
    
    
    

     
     比如
     
     
initialRouteName - 初始显示的Tab对应的页面路由名称
     
     

      
      
      
      
tabBarComponent - Tab选项卡组件，有 TabBarBottom 和 TabBarTop 两个值，在iOS中默认为 TabBarBottom ，在Android中默认为 TabBarTop 。
TabBarTop - 在页面的顶部
TabBarBottom - 在页面的底部

      
      

       
       
       
       
tabBarPosition - Tab选项卡的位置，有 top 或 bottom 两个值

       
       
 
         
        
lazy - 是否懒加载页面
 
       
      
      
     
     
    
    
    
    

   
   
  
  
const TabNavigatorConfigs = {
    initialRouteName: 'Home',
    tabBarComponent: TabBarBottom,
    tabBarPosition: 'bottom',
    lazy: true,
};