react-native-http请求后navigator导航跳转
琢磨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')
当时拿到这个问题,没有去分析代码就直接百度了。在stackoverflow上也查找到一些解决方案,但是并没有用对我用处
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 导航方式 , 那么我们应该怎样设计和组合应用他们来构建一个完美的回退栈 ...
随机推荐
- Git学习(一)——Git介绍与安装
一.Git诞生 Linus在1991年创建了Linux,从此,Linux系统不断发展,成为最大的服务器系统软件. 2005年,Linus用C编写了一个分布式版本控制工具--Git. 二.集中式vs分布 ...
- iOS网络请求之multipart/form-data提交数据
multipart/form-data表单数据 在http网络请求中,post没有请求长度的限制,因为post把数据放在了body中,而不是像Get一样放在了浏览器的地址栏中(可以这么理解), 所以相 ...
- 解决程序出现“terminate called after throwing an instance of 'std::bad_alloc' what(): std::bad_alloc Aborted (core dumped)”的问题
最近跑程序时出现了这么一个问题: terminate called after throwing an instance of 'std::bad_alloc' what(): std::bad_al ...
- DUILIB圆形头象
#ifndef __UIHEADICON_H__#define __UIHEADICON_H__ /* 名称:圆形头像控件(派生CButtonUI类)*/ class CHeadUI: public ...
- easyui 下拉树改造
<select id="cc" style="width: 250px"></select> <div id="sp&q ...
- php count函数
最近被问到一个函数count 1.count("123456") 对应的输出是什么? 2.count(null) 对应的输出是什么? 以前没有认真的考虑,只是心里有一个印象那就是c ...
- XE3随想14:关于 SO 与 SA 函数
通过 SuperObject 的公用函数 SO 实现一个 ISuperObject 接口非常方便; 前面都是给它一个字符串参数, 它的参数可以是任一类型甚至是常数数组. SA 和 SO 都是返回一 I ...
- dictionaryWithContentsOfFile:方法
dictionaryWithContentsOfFile:方法的功能是创建一个字典,将字典中的内容设置为指定文件中的所有内容, 语法:(id)dictionaryWithContentsOffilE. ...
- Android 测试Handler的基本使用
package com.sherlock.app_handler; import java.io.ByteArrayOutputStream; import java.io.InputStream; ...
- 实战录 | 一起唠唠那些常见的DDoS攻击
<实战录>导语 云端卫士<实战录>栏目定期会向粉丝朋友们分享一些在开发运维中的经验和技巧,希望对于关注我们的朋友有所裨益.本期分享人为云端卫士系统架构师高鹏,将带来常见的DDo ...