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.html


4.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

http://stackoverflow.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