琢磨react-native有一段时间了。对于我来说,它的确是前端开发工作者的福音,因为我可以利用它来写app的代码,而且基本可以一套代码,多个平台使用。
早就想写一篇随笔记录一下react native的学习历程了,可是最近在navigator(导航,可以理解为‘页面’跳转)这里遇到了一个比较棘手的问题,所以耽搁了两天,中途甚至产生过放弃的念头,还一度去看了ionic以及QT的demo,思前想后,经过对比,发现还是react-native比较自己。刚好今天也将困扰已久额问题解决了,心情大好啊。今后我会将自己学习react native的心得体会都记录在随笔里面。
唠叨了一些感慨,该进入正题了,react-native我就不做介绍了,直接来看怎么做一个demo吧。
由于我的电脑是windows系统,所以就说android的开发了。ios的资料比android更多,大家可以网上查找。
1.开发环境的配置
官网讲的比较详细,你也可以看react-native中文网参照配置
http://reactnative.cn/docs/0.27/getting-started.html#content
2.创建demo
假如你的E盘有一个react的空文件夹
(1)cd react
(2)react-native init demoproject//初始化一个react-native项目
(3)cd demoproject
(4)react-native run-android //此处常常容易出问题,android Packger可能不会自动运行,这时我的做法如下:
---1.用android studio打开demoproject中的android这个文件夹
---2.启动调试模式运行这个android程序
在进行第二步操作时,我这边使用的是真机调试。真机调试需要确保手机已经连接了,可以使用adb devices(命令行窗口输入)进行查看。如果没有查找到设备,可以尝试重新连接你的安卓设备。
也可以尝试adb kill-server,然后再重启 adb start-server
---3.一般第二步成功后,手机上一般会提示错误。
这时候可以根据页面的提示,在命令窗口输入 adb reverse tcp:8081 tcp:8081
---4.手动启动android项目
在命令窗口中键入react-native start
这步成功后,你就可以在手机上看到react的欢迎页面了。
手机连接时请注意一下事项:
(1).允许设备进行调试(一般在连接的时候会提示,如果没有,你可以的到手机的设置里,找到类似于开发者选项,设置允许设备调试)
(2).由于安卓手机真机调试时,可以使用摇动手机的方式进行重新加载js或者进行其他设置的操作。而一些手机在安装app时,是默认禁用了该app的悬浮窗,所以你应该去到这个app的设置里面,打开悬浮窗功能。这样才能进行方便之后的调试
3。与后台交互
常见的例如登录界面。我没有找到react-native中有类似于js那样可以直接获取dom元素的值得方法,不过它提供了一个另外的思路,改变state
import React,{Component} from 'react';
import{
View,
Text,
TextInput,
TouchableOpacity
} from 'react-native';
import Welcome from './Welcome';
class Login extends React.Component {
constructor(props) {
super(props);
this.state = {
name: null,
age: null,
}
}
_openPage() {
this.props.navigator.push({
component: Welcome,
params: {
name: this.state.name,
age: this.state.age,
changeMyAge: (age) => {
this.setState({ age })
}
}
})
}
render() {
return (
<View style={{ flex: 1, alignItems: 'center', backgroundColor: '#FFFFFF' }}>
<Text>Form Page</Text>
<TextInput
value={this.state.name}
onChangeText={name => this.setState({ name })}
placeholder={'Enter your name'}
style={{ height: 40, width: 200 }} />
<Text>My age: {this.state.age ? this.state.age : 'Unknown'}</Text>
<TouchableOpacity onPress={this._openPage.bind(this)}>
<Text style={{ color: '#55ACEE' }}>Update my age</Text>
</TouchableOpacity>
</View>
);
}
} export default Login;
(注意:react native要导出的类,都需要首字母大写) state可以理解为构建这个组件时,定义的一个对象,对象里有诸如name,age等属性。当输入框的值发生改变时,绑定一个事件(onChange,onChangeText),动态改变state.name或者state.age的值。最后在进行登录操作的时候,将这两个变量传给后台,验证是否登录成功。react推荐fetch进行http请求
关于fetch的详细说明,参见我的另外一篇博客 http://www.cnblogs.com/Ricky-Huang/p/5566918.html4.fetch请求成功后,navigator跳转
fetch(
'http://192.168.1.136:8888/login'
, {
var navigatorOrigin=this.props.navigator;
method:
'post'
,
headers: {
"Content-type"
:
"application/x-www-form-urlencoded; charset=UTF-8"
},
body:
'foo=bar&lorem=ipsum'
})
.then(json)
.then(
function
(data) {
if(data.code=='success'){
this.props.navigator.push({
title: 'Login',
component: Login
})
navigatorOrigin.push({
title:'Login',
component:Login
})
}
})
.
catch
(
function
(error) {
console.log(
'Request failed'
, error);
});
注意上面的蓝色字体,我在这个地方被坑了很久,在fetch函数返回后,总是报错
undefined is not an object (evaluating 'this.props.navigator.push')
当时拿到这个问题,没有去分析代码就直接百度了。在*上也查找到一些解决方案,但是并没有用对我用处
https://github.com/facebook/react-native/issues/416
过了两天,我在此启动这个app,同样报错。我思考着难道是因为进行了http请求之后导致this发生了变化,不再指向最初的类了吗。于是我将以下代码添加到了fetch函数入口处:
var navigatorOrigin=this.props.navigator;
再用以上红色代码替换掉蓝色的部分。奇迹发生了,卡顿了两天的app,终于可以如愿登录跳转了。
回过头看,这其实是一个很简单的问题,就是http请求返回结果后,this的指向发生了变化。也提醒我写代码的时候,也需要多思考。
这篇随笔写的比较粗略,一些详细的地方没有介绍到,比如navigator是什么,怎么使用。不过不用担心,http://bbs.reactnative.cn/topic/20/%E6%96%B0%E6%89%8B%E7%90%86%E8%A7%A3navigator%E7%9A%84%E6%95%99%E7%A8%8B/2
这篇文章介绍的很仔细。
同时对于初学react-native的伙伴来说,多看看诸如此类的文章还是很有好处滴
react-native-http请求后navigator导航跳转的更多相关文章
-
React Native 网络请求封装:使用Promise封装fetch请求
最近公司使用React作为前端框架,使用了异步请求访问,这里做下总结: React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRe ...
-
《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」
此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...
-
[RN] React Native FlatList 选中后 状态没有立即发生改变,而在下一次生效的问题
React Native FlatList 选中后 状态没有立即发生改变,而在下一次生效的问题 解决关键: 给 FlatList 添加 extraData={this.state} 非常关键,如果不设 ...
-
React Native(四)——顶部以及底部导航栏实现方式
效果图: 一步一步慢慢来: 其实刚入手做app的时候,就应该做出简单的顶部以及底部导航栏.无奈又在忙其他事情,导致这些现在才整理出来. 1.顶部导航栏:react-native-scrollable- ...
-
React Native网络请求
很多移动应用都需要从远程地址中获取数据或资源.你可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容--以下就是你会用到的东西.新手可以对照这 ...
-
React Native初始化项目后执行react-native run-ios,构建失败
今天是肿么了......一上班创建React Native项目,react-native run-ios运行就报错,运行不了...呜呜...... 一开始以为自己react-native run-io ...
-
React native中DrawerNavigator,StackNavigator,TabNavigator导航栏使用
import React from 'react'; import { View, Text,Button } from 'react-native'; import { DrawerNavigato ...
-
React Native学习之自定义Navigator
Navigator还是最常用的组件, 所以自己封装了一个, 使用起来也比较简单, 如下: 首先导入组件 var MLNavigator = require('../Lib/MLNavigator'); ...
-
React Navigation / React Native Navigation 多种类型的导航结合使用,构造合理回退栈
React Navigation 更新到版本5已经是非常完善的一套导航管理组件, 提供了Stack , Tab , Drawer 导航方式 , 那么我们应该怎样设计和组合应用他们来构建一个完美的回退栈 ...
随机推荐
-
sql server中常用方法函数
SQL SERVER常用函数 1.DATEADD在向指定日期加上一段时间的基础上,返回新的 datetime 值. (1)语法: DATEADD ( datepart , number, date ) ...
-
转载:CODE CSDN Git 配制方法介绍
以前一直使用Github,最近看到CSDN出了CODE代码托管功能,由于国内的阿里云服务器很稳定,而且不会被国 墙,所以果断的迁移了,下面就简单的介绍一下CODE的配置使用.其实CSDN的code 何 ...
-
Android studio打开之后 cannot load project: java.lang.NUllpointerException
参考来源:http://bbs.csdn.net/topics/391014393 关闭网络,重新打开Android studio就好了.(但是原因不清楚是为什么?) Internal error. ...
-
写一个程序,用于分析一个字符串中各个单词出现的频率,并将单词和它出现的频率输出显示。(单词之间用空格隔开,如“Hello World My First Unit Test”)
public class Test { public void index() { String strWords = "Hello World My First Unit Test&quo ...
-
Android-Universal-Image-Loader的缓存处理机制
讲到缓存,平时流水线上的码农一定觉得这是一个高大上的东西.看过网上各种讲缓存原理的文章,总感觉那些文章讲的就是玩具,能用吗?这次我将带你一起看过UIL这个国内外大牛都追捧的图片缓存类库的缓存处理机制. ...
-
二代USBKEY与一代USBKEY有什么区别?使用时需要注意什么?
二代USBKEY相较于一代USBKEY产品,增加了屏幕以及按键功能:可通过二代USBKEY产品的屏幕查看交易或操作信息,通过按键的方式进行上翻.下翻.确认.取消等操作. 二代USBKEY产品采用Mic ...
-
九天学会Java,第一天,变量和数据类型,赋值和输出
用9天入门三门编程语言,有可能嘛,尤其是对没有基础的同学来说?对于想学好的编程的人来说,无论从哪一门语言开始入手,语言的本身其实并不是我们最应该的关心的,至少不是作为一个初学者首先关心的. 网络上,网 ...
-
gevent模块学习(一)
1.Event类,事件主要用于Greenlet之间的异步通信 e = gevent.event.Event() -> Event 说明: 创建一个信号对象 e.set() -> None ...
-
Elicpse使用技巧-打开选中文件文件夹或者包的当前目录
很多时候,我们需要在eclipse那里打开选中文件(文件夹,包)的当前目录,在资源管理器那里显示这个目录,这个时候,我们又不想采用“选中文件/文件夹/包名--右击--Properties--Locat ...
-
Servlet中的过滤器Filter
链web.xml中元素执行的顺序listener->filter->struts拦截器->servlet. 1.过滤器的概念 Java中的Filter 并不是一个标准的Servlet ...