用到 react Navigation 组件
兼容性: IOS/Android
原理: React Navigation 为页面的 props 上挂载了 navigation 对象, 可用来做路由跳转,在做页面跳转时可以携带参数/回调方法前往目标页面, 从而达到传参的目的。
切换路由方法:
this.props.navigation.goBack() 返回上一层
this.props.navigation.popToTop() 返回堆栈最顶层
this.props.navigation.push(‘Details’) 继续往下推送新的路由,相当于子页面的子页面
this.props.navigation.navigate(‘Details’) 将新路由推送到导航器中,如果没有在导航器中,则跳转到该页面
父页面A:
import {Component} from "react";
import {
Text,AlertStatic as Alert,
TouchableOpacity,
View,
DeviceEventEmitter
} from "react-native";
import {createStackNavigator} from "react-navigation";
import B from '../B.js';
calss A extends Component {
render(){
return(
<View>
<TouchableOpacity onpress={
()=>{
this.props.navigation.navigate('B')
}
}>
<Text>点击跳转</Text>
</TouchableOpacity>
</View>
)
}
}
const HomeScreen = createStackNavigator({
Home: {screen: A},
Details: {screen: B},
});
module.exports = A;
子页面B:
import {Component} from "react";
import {
Text,
TouchableOpacity,
View,
DeviceEventEmitter
} from "react-native";
class B extends Component {
render(){
return(
<View>
<TouchableOpacity onpress={
()=>{
this.props.navigation.goBack();
}
}>
<Text>点击返回</Text>
</TouchableOpacity>
</View>
)
}
}
module.exports = B;
接下来是带参数传递方法:
父页面传参数给子页面
<TouchableOpacity onpress={
()=>{
this.props.navigation.navigate('B',{
params:xx,
})
}
}>
子页面接收参数
constructor(props){
super(props);
const {navigation} = this.props;
let yy = navigation.getParam("params");
}
这样子页面就获取到父页面传递过来的值了。
子页面带参数返回父页面方法(两种方式):
方法一:
子页面传递参数
<TouchableOpacity onpress={
()=>{
this.props.navigation.state.params.callBack(params);
this.props.navigation.goBack();
}
}>
<Text>点击返回</Text>
</TouchableOpacity>
父页面接收参数
<TouchableOpacity onpress={
()=>{
this.props.navigation.navigate('B',{
params:xx,
callBack:(params) =>{
Alert(params);
}
})
}
}>
方法二:
添加一个监听器DeviceEventEmitter
子页面
TouchableOpacity onpress={
()=>{
DeviceEventEmitter.emit('returnData',params);
this.props.navigation.goBack();
}
}>
<Text>点击返回</Text>
父页面
componentDidMount() {
DeviceEventEmitter.addListener("returnData", (params) => {
Alert(params);
})
}
ok,完成!
在react-native上是怎么写样式的吧,和传统的web不一样的是,在react-native上面是没有css代码,不过得益于Yoga,我们可以在客户端上像写css一样的去书写我们的样式。
初始化 wkwebview,设置 message handler,native 端注册了 testecho 的messageHandler,实现 WKScriptMessageHandler协议,执行JS 代码 ,所以 JS 可以通过 window.webkit.messageHandlers.testecho.postMessage 来回调客户端,和文档中说的一样
因为js语言的特性,使用node开发程序的时候经常会遇到异步处理的问题。对于之前专长App开发的我来说,会纠结node中实现客户端API请求的“最佳实践”。下面以OAuth2.0为场景,需要处理的流程:获取access token、使用获取到的token,发起API请求、处理API数据
GraphQL是一个API查询语言,他可以将使用PostgreSQL写的server代码自动生成Query或者Mutation,非常的方便。而Apollo Client就是一个强大的JavaScript GraphQL客户端。对于cache,在Apollo Client中有着强大的管理策略。
React Native 是 Facebook 2015年开源的 Javascript 框架,旨在使用 Javascript 高效开发手机端 App。根据大众的需求,我们列出了一个有用的React-Native UI库列表,可以帮助你更好地入门React Native。
在React Native 中由于业务的需要, 我们往往要在诸多的页面间,组件之间做一些参数的传递与管理, 在这里我总结了几大经过验证,稳定好用的方式给大家
随着 H5 标准的发布以及推广,使得移动应用的开发也受到了很大影响,出于效率、成本等原因,移动应用的开发不再完全依赖于 “原生”。近日越发火热的混合应用(Hybrid App)介于 Web 应用和原生应用之间
react-native打包安卓apk的时候,报错Cannot get property packageName on null object,完全没有头绪,研究了半天才发现竟然是因为package.json里面scripts自定了命令导致的,无法理解为何会影响安卓打包并且报错packageName null
之前写的项目都是人家编写好的脚手架,里面包含项目所需的环境文件,但由于有些东西用不到打包增加软件体积,所以自己从头搭建个环境。是基于 Native Base + react-navigation + Redux 的 React Native 脚手架,现在项目环境如下
Flutter作为备受关注的跨平台的开发框架,长远来看,前景肯定是比较好的,在其基础组件还未完善与成熟之前,能够高效的复用现有的native组件,是比较合适的方案。官方提供了Plugin的方式,允许将一个成熟的native组件(比如mapview)
内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!