React-native HTTP request after navigator navigation jump

I have been pondering react-native for some time. For me, it's really a boon for front-end developers, because I can use it to write code for the app, and it's basically a set of code that can be used by multiple platforms.

Long wanted to write an essay to record the react native learning process, but recently in navigator (navigation, can be understood as ' Page ' Jump ' here met a more difficult problem, so delayed two days, halfway even produced the idea of giving up, also once went to see the Ionic and Qt demo, after thinking, after comparison, found or react-native compare themselves. Just today will be plagued by the problem has been solved, a good mood ah. In the future I will learn react native of my experience are recorded in the essay.

Nagging some feeling, should enter the subject, react-native I do not introduce, directly to see how to do a demo it.

Since my computer is a Windows system, I'm talking about the development of Android. iOS is more informative than Android, and you can find it online.

1. Configuration of the development environment

The official website is more detailed, you can also see react-native Chinese network reference configuration

Http://reactnative.cn/docs/0.27/getting-started.html#content

2. Create Demo

Join your e-disk with a react empty folder

(1) CD react

(2) react-native init demoproject//Initialization of a react-native project

(3) CD Demoproject

(4) React-native run-android//Here are often prone to problems, Android Packger may not run automatically when I do the following:

---1. Open the Android folder in Demoproject with Android studio

---2. Start debug mode to run this Android program

In the second step, I'm using real-machine debugging. Real-machine debugging needs to make sure the phone is connected and can be viewed using ADB devices. If you do not find the device, you can try reconnecting your Android device.

You can also try ADB kill-server, and then restart ADB start-server

---3. Generally, the second step succeeds, the phone will usually prompt the error.

At this time, according to the page prompts, in the command window input adb reverse tcp:8081 tcp:8081

---4. Manually start the Android project

In the Command window, type react-native start

Once this is done, you'll be able to see react's welcome page on your phone.

Please note the following when you connect your phone:

(1). Allow the device to debug (generally in the connection will prompt, if not, you can go to the phone settings, find similar to the developer options, settings allow device debugging)

(2). Since the Android phone is being debugged, you can reload JS or make other settings by shaking your phone. Some phones are disabled by default when installing the app, so you should go to the app's settings and open the hover window function. This will allow for easy commissioning.

3. Interacting with the background

Common such as the login interface. I didn't find a way to get the DOM element directly in React-native, which is similar to JS, but it provides a different idea of changing the 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;

State can be understood as an object defined when building this component, with properties such as Name,age in the object. When the value of the input box changes, bind an event to dynamically change the value of State.name or State.age. Finally, when the login operation, the two variables are passed to the background to verify that the login is successful. REACT recommended fetch for HTTP requests
For a detailed description of fetch, see my other blog http://www.cnblogs.com/Ricky-Huang/p/5566918.html


4after the fetch request succeeds, navigator jumps

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); 

  });

Notice the blue font above, I was in this place for a long time, after the fetch function returned, always error

Undefined isn't an object (evaluating ' This.props.navigator.push ')

At that time to get this problem, not to analyze the code directly Baidu. Some solutions were found on StackOverflow, but it didn't work for me.

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

After two days, I started the app here, the same error. I'm thinking, is it because the HTTP request caused this to change, no longer pointing to the original class? So I added the following code to the entrance to the FETCH function:

var navigatororigin=this.props.navigator;

Then replace the blue part with the red code. The miracle happened, the app has been stuck for two days, finally can login jump.

Looking back, this is actually a very simple question, that is, after the HTTP request returns the result, this point has changed. Also reminds me to write code, also need to think more.

This essay is relatively sketchy, and some details are not introduced, such as what navigator is and how it is used. But don't worry, 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.

This article is very carefully presented.

At the same time for beginners react-native partners, more to look at such articles are still very good

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 request after navigator navigation jump