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

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

（2）定义跳转属性参数，即顶部导航栏的一些参数设置和跳转方式。

可以看到，我们将Tab作为一个界面设置到了StackNavigator。这样就可以实现Tab导航和界面间跳转的效果了。

最后就是在render中引用StackNavigator：

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

StackNavigator还提供了onNavigationStateChange回调方法，用来监听导航状态的改变。具体不再赘述。实现了界面跳转和切换，那么就该来增加下界面之间的感情了，来看看如何实现界面之间的传值和取值。

5、界面间跳转、传值、取值

在界面组件注入到StackNavigator中时，界面组件就被赋予了navigation属性，即在界面组件中可以通过【this.props.navigation】获取并进行一些操作。

navigation属性中提供了很多的函数简化界面间操作，简单列举几点：

（1）通过navigate函数实现界面之间跳转：

this.props.navigation.navigate('Mine');

参数为我们在StackNavigator注册界面组件时的名称。同样也可以从当前页面返回到上一页：

// 返回上一页 
this.props.navigation.goBack();

（2）跳转时传值：

this.props.navigation.navigate('Mine',{info:'传值过去'});

第一个参数同样为要跳转的界面组件名称，第二个参数为要传递的参数，info可以理解为key，后面即传递的参数。

（3）获取值：

{this.props.navigation.state.params.info}

通过state.params来获取传来的参数，后面为key值。此处为info。

以上实现完成，我们就可以愉快的玩耍啦~~ 什么？忽然发现在Android上的效果和IOS效果不一样。老板要界面一致哇~ 怎么办？那就需要我们进行简单的适配了。

三、DrawerNavigator实现抽屉导航

1、导航实现

API定义：DrawerNavigator（RouteConfigs，DrawerNavigatorConfig）

（1）界面中定义DrawerNavigator：

import {StackNavigator,TabNavigator,DrawerNavigator} from 'react-navigation'; 
import HomeScreen from './pages/HomePage'; 
import MineScreen from './pages/MinePage'; 
 
export default class Demo extends Component { 
 
 render() { 
    return ( 
     <Navigator /> 
    ); 
 } 
} 
 
const Navigator = DrawerNavigator({ 
 
  Home:{screen:HomeScreen}, 
  Mine:{screen:MineScreen}, 
}); 
 
const styles = StyleSheet.create({ 
 
  container: { 
    flex: 1, 
  }, 
}); 
 
AppRegistry.registerComponent('Demo', () => Demo);

转载注明出处：http://www.heiqu.com/507.html

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

相关推荐