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 导航方式 , 那么我们应该怎样设计和组合应用他们来构建一个完美的回退栈 ...
随机推荐
- ww
#!bin/python #coding=utf-8 """ Create by he """ import sys import re i ...
- subversion
yum install apr-util-devel.x86_64 sqlite-devel https://subversion.apache.org/download.cgi ./configur ...
- hdu 1069 (DP) Monkey and Banana
题目:这里 题意: Description 一组研究人员正在设计一项实验,以测试猴子的智商.他们将挂香蕉在建筑物的屋顶,同时,提供一些砖块给这些猴子.如果猴子足够聪明,它应当能够通过合理的放置一些砖块 ...
- mysql中的where和having子句的区别
mysql中的where和having子句的区别 having的用法 having字句可以让我们筛选成组后的各种数据,where字句在聚合前先筛选记录,也就是说作用在group by和having字句 ...
- 排序陷阱 List.Sort Linq.OrderBy
部分内容摘自:http://www.th7.cn/Program/net/201511/692766.shtml C#框架里面主要提供了两种排序方式:Array.Sort Linq.Orderby. ...
- Sql Server 常用操作
--DDL触发器CREATE TRIGGER [TR_create_drop_alter_Table] ON DATABASE FOR CREATE_TABLE,DROP_table,ALTER_ ...
- JQuery初体验
虽然做b/s也有一年半了,但是还没怎么认真的去看JQuery,趁自己生病的这几天,恶补一下JQuery方面的知识,保持学习的态度,内容很简单,聊以自慰一下>_<.废话不多说,直接上代码了. ...
- Google高级搜索语法
Google高级搜索语法 Google搜索果真是一个强悍的不得了的搜索引擎,今天转了一些 google的高级搜索语法 希望能帮助到大家. 一.allinanchor: anchor是一处说明性的文 ...
- Spring 容器
Spring提供了两个核心接口:BeanFactory和ApplicationContext,其中applicationContext是BeanFactory的子接口. 他们都可代表Spring容器, ...
- cnavas
1.创建一个画布eg:<cnavas width=100px;height=100px; style="border:1px solid rgba(242 ,54,33,0.1)&qu ...