react-native-http请求后navigator导航跳转

时间:2022-08-01 04:40:01

琢磨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这个文件夹

react-native-http请求后navigator导航跳转

---2.启动调试模式运行这个android程序

react-native-http请求后navigator导航跳转

在进行第二步操作时,我这边使用的是真机调试。真机调试需要确保手机已经连接了,可以使用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

http://*.com/questions/31304017/react-native-navigatorios-undefined-is-not-an-object-evaluating-this-props-n

过了两天,我在此启动这个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的伙伴来说,多看看诸如此类的文章还是很有好处滴

http://bbs.reactnative.cn/topic/15/react-react-native-%E7%9A%84es5-es6%E5%86%99%E6%B3%95%E5%AF%B9%E7%85%A7%E8%A1%A8

														
		

react-native-http请求后navigator导航跳转的更多相关文章

  1. React Native 网络请求封装:使用Promise封装fetch请求

    最近公司使用React作为前端框架,使用了异步请求访问,这里做下总结: React Native中虽然也内置了XMLHttpRequest 网络请求API(也就是俗称的ajax),但XMLHttpRe ...

  2. 《React Native 精解与实战》书籍连载「React Native 网络请求与列表绑定」

    此文是我的出版书籍<React Native 精解与实战>连载分享,此书由机械工业出版社出版,书中详解了 React Native 框架底层原理.React Native 组件布局.组件与 ...

  3. &lbrack;RN&rsqb; React Native FlatList 选中后 状态没有立即发生改变,而在下一次生效的问题

    React Native FlatList 选中后 状态没有立即发生改变,而在下一次生效的问题 解决关键: 给 FlatList 添加 extraData={this.state} 非常关键,如果不设 ...

  4. React Native&lpar;四&rpar;——顶部以及底部导航栏实现方式

    效果图: 一步一步慢慢来: 其实刚入手做app的时候,就应该做出简单的顶部以及底部导航栏.无奈又在忙其他事情,导致这些现在才整理出来. 1.顶部导航栏:react-native-scrollable- ...

  5. React Native网络请求

    很多移动应用都需要从远程地址中获取数据或资源.你可能需要给某个REST API发起POST请求以提交用户数据,又或者可能仅仅需要从某个服务器上获取一些静态内容--以下就是你会用到的东西.新手可以对照这 ...

  6. React Native初始化项目后执行react-native run-ios,构建失败

    今天是肿么了......一上班创建React Native项目,react-native run-ios运行就报错,运行不了...呜呜...... 一开始以为自己react-native run-io ...

  7. React native中DrawerNavigator&comma;StackNavigator&comma;TabNavigator导航栏使用

    import React from 'react'; import { View, Text,Button } from 'react-native'; import { DrawerNavigato ...

  8. React Native学习之自定义Navigator

    Navigator还是最常用的组件, 所以自己封装了一个, 使用起来也比较简单, 如下: 首先导入组件 var MLNavigator = require('../Lib/MLNavigator'); ...

  9. React Navigation &sol; React Native Navigation 多种类型的导航结合使用&comma;构造合理回退栈

    React Navigation 更新到版本5已经是非常完善的一套导航管理组件, 提供了Stack , Tab , Drawer 导航方式 , 那么我们应该怎样设计和组合应用他们来构建一个完美的回退栈 ...

随机推荐

  1. sql server中常用方法函数

    SQL SERVER常用函数 1.DATEADD在向指定日期加上一段时间的基础上,返回新的 datetime 值. (1)语法: DATEADD ( datepart , number, date ) ...

  2. 转载:CODE CSDN Git 配制方法介绍

    以前一直使用Github,最近看到CSDN出了CODE代码托管功能,由于国内的阿里云服务器很稳定,而且不会被国 墙,所以果断的迁移了,下面就简单的介绍一下CODE的配置使用.其实CSDN的code 何 ...

  3. Android studio打开之后 cannot load project&colon; java&period;lang&period;NUllpointerException

    参考来源:http://bbs.csdn.net/topics/391014393 关闭网络,重新打开Android studio就好了.(但是原因不清楚是为什么?) Internal error.  ...

  4. 写一个程序,用于分析一个字符串中各个单词出现的频率,并将单词和它出现的频率输出显示。(单词之间用空格隔开,如&OpenCurlyDoubleQuote;Hello World My First Unit Test”)

    public class Test { public void index() { String strWords = "Hello World My First Unit Test&quo ...

  5. Android-Universal-Image-Loader的缓存处理机制

    讲到缓存,平时流水线上的码农一定觉得这是一个高大上的东西.看过网上各种讲缓存原理的文章,总感觉那些文章讲的就是玩具,能用吗?这次我将带你一起看过UIL这个国内外大牛都追捧的图片缓存类库的缓存处理机制. ...

  6. 二代USBKEY与一代USBKEY有什么区别?使用时需要注意什么?

    二代USBKEY相较于一代USBKEY产品,增加了屏幕以及按键功能:可通过二代USBKEY产品的屏幕查看交易或操作信息,通过按键的方式进行上翻.下翻.确认.取消等操作. 二代USBKEY产品采用Mic ...

  7. 九天学会Java,第一天,变量和数据类型,赋值和输出

    用9天入门三门编程语言,有可能嘛,尤其是对没有基础的同学来说?对于想学好的编程的人来说,无论从哪一门语言开始入手,语言的本身其实并不是我们最应该的关心的,至少不是作为一个初学者首先关心的. 网络上,网 ...

  8. gevent模块学习&lpar;一&rpar;

    1.Event类,事件主要用于Greenlet之间的异步通信 e = gevent.event.Event() -> Event 说明: 创建一个信号对象 e.set() -> None ...

  9. Elicpse使用技巧-打开选中文件文件夹或者包的当前目录

    很多时候,我们需要在eclipse那里打开选中文件(文件夹,包)的当前目录,在资源管理器那里显示这个目录,这个时候,我们又不想采用“选中文件/文件夹/包名--右击--Properties--Locat ...

  10. Servlet中的过滤器Filter

    链web.xml中元素执行的顺序listener->filter->struts拦截器->servlet. 1.过滤器的概念 Java中的Filter 并不是一个标准的Servlet ...