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’)将新路由推送到导航器中，如果没有在导航器中，则跳转到该页面

父页面传参数给子页面

()=>{

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有什么作用”有了更深的了解，不妨来实际操作一番吧！这里是创新互联建站，更多相关内容可以进入相关频道进行查询，关注我们，继续学习！