本篇内容主要讲解“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有什么作用”有了更深的了解,不妨来实际操作一番吧!这里是创新互联建站,更多相关内容可以进入相关频道进行查询,关注我们,继续学习!
本文名称:web前端中native有什么作用-创新互联
文章转载:https://www.cdcxhl.com/article18/djhidp.html
成都网站建设公司_创新互联,为您提供App开发、品牌网站建设、电子商务、营销型网站建设、移动网站建设、用户体验
声明:本网站发布的内容(图片、视频和文字)以用户投稿、用户转载内容为主,如果涉及侵权请尽快告知,我们将会在第一时间删除。文章观点不代表本网站立场,如需处理请联系客服。电话:028-86922220;邮箱:631063699@qq.com。内容未经允许不得转载,或转载时需注明来源: 创新互联