web前端中native有什么作用

本篇内容主要讲解“web前端中native有什么作用”，感兴趣的朋友不妨来看看。本文介绍的方法操作简单快捷，实用性强。下面就让小编来带大家学习“web前端中native有什么作用”吧!

　　react-native实现页面之间的相互传值

　　用到reactNavigation组件

　　兼容性:IOS/Android

　　原理:reactNavigation为页面的props上挂载了navigation对象,可用来做路由跳转，在做页面跳转时可以携带参数/回调方法前往目标页面，从而达到传参的目的。

　　切换路由方法：

　　this.props.navigation.goBack()返回上一层

　　this.props.navigation.popToTop()返回堆栈最顶层

　　this.props.navigation.push(‘Details’)继续往下推送新的路由，相当于子页面的子页面

　　this.props.navigation.navigate(‘Details’)将新路由推送到导航器中，如果没有在导航器中，则跳转到该页面

　　父页面传参数给子页面

　　<TouchableOpacityonpress={

　　()=>{

　　this.props.navigation.navigate('B',{

　　params:xx,

　　})

　　}

　　}>

　　子页面接收参数

　　constructor(props){

　　super(props);

　　const{navigation}=this.props;

　　letyy=navigation.getParam("params");

　　}

　　这样子页面就获取到父页面传递过来的值了。

　　ReactNative添加Redux支持

　　现在项目环境如下：

　　{

　　"name":"app",

　　"version":"0.0.1",

　　"private":true,

　　"scripts":{

　　"start":"react-nativestart",

　　"test":"jest",

　　"lint":"eslint."

　　},

　　"dependencies":{

　　"native-base":"^2.13.4",

　　"react":"16.8.6",

　　"react-native":"0.60.5",

　　"react-native-gesture-handler":"^1.3.0",

　　"react-native-keyboard-aware-scroll-view":"^0.9.1",

　　"react-native-reanimated":"^1.2.0",

　　"react-navigation":"^3.11.1"

　　},

到此，相信大家对“web前端中native有什么作用”有了更深的了解，不妨来实际操作一番吧！这里是亿速云网站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！