React native Learning One (environment collocation and resolution of common mistakes)

React native Learning One (environment collocation)

Homepage, follow the instructions on http://reactnative.cn/docs/0.30/getting-started.html#content, download and install python2、nodejs、git、 Android Studio. Here the first two are relatively good outfit, Android Studio installed quite slow, in fact, should only install the SDK on the line, installation SDK can be http://www.androiddevtools.cn/this inside the way to set up an agent.

The software is installed, is the environment variable settings, add android_home environment variable refers to the Android SDK directory, add C:\Users\Administrator\AppData\Local\Android\sdk\ in Path Platform-tools, this is to use the ADB command line, can be added without.

Finally, the react project is created.

React-native Init AWESOMEPROJECTCD awesomeprojectreact-native run-android

React-native Run-android here may encounter a problem, the most likely is to find the Andrio SDK, reported this error

Error:a problem occurred configuring project ': App '. > Failed to find Build

In the SDK that directory to see what the version number is, \sdk\build-tools, my is 23.0.3, but reactnative build.grade file buildtoolsversion is 23.0.1, So change the value to correspond to the line.

Well, it's over, and it's a service.

React-native start

He's going to open a local HTTP service with a port number of 8081, Http://localhost:8081/index.android.bundle?platform=android&dev=true&hot=false &minify=false Open this address if you can see the JS code, it means that the service started successfully, such as

And then run the app on the simulator, download a blue stack simulator, there is a little more advertising, cautious point on the line, the above are all ready, in the simulator there is a MyProject application, open, this you should be able to see a red error code, such as:

This time, if you are right in front of the steps, then you can point the simulator to the left of the shaking, this time will appear a menu selection, select the bottom of the dev setting, such as

In this setting, set your native IP and port number 8081, as

And then return to the previous application, this time, you should be able to see

Then change to Hello,world, modify the code in the Index.android.js

Class MyProject extends Component {  render () {    return (      <view style={styles.container}>        < Text style={styles.welcome}>          Hello,world.        </Text>        <text style={styles.instructions}> to the          palm of the excrement        </Text>        <text style={ styles.instructions}>          Ye Yu QQ Group: 5678537        </Text>      </View>    );}  }

Or shake, select Reload JS, you can see the latest effect

Is it a sense of accomplishment? I have a whole day, the whole hello world, OK!! That's it, tomorrow to learn something else to record, have want to learn together react native, can join Q group 77813547, 5678537

React native Learning One (environment collocation and resolution of common mistakes)