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