[Reactnative Primer to Proficient]react Native First program Hello Word

Life is not right and wrong, only after the choice of persistence, do not regret, go down, is right.

React Native Project Directory Resolution

In the previous section we simply built a new react native project Awsoneproject, and we ran it directly on the emulator without any action. Here we take a detailed look at, React native to us to generate the few files in the end is what to do with.

Project directory Structure

The file construction looks like this:

• Android
  Project build directory for Android
• iOS
  Project build directory for iphone
• Node_modules
  React native reference repository, Project dependencies Library, packaging scripts, etc. directory
• Index.android.js
  This file is generated by default, but this can be set in the mainactivity in the Android directory. As follows

mReactInstanceManager = ReactInstanceManager.builder()
.setApplication(getApplication())
.setBundleAssetName("index.android.bundle")
//Set the main entry of the module as index.android
.setJSMainModuleName("index.android")
.addPackage(new MainReactPackage())
.setUseDeveloperSupport(BuildConfig.DEBUG)
.setInitialLifecycleState(LifecycleState.RESUMED)
.build ();

Its content follows the react rules

* *
* Sample React Native App
* https://github.com/facebook/react-native
* /
‘use strict‘;
//Declare several dependency libraries that need to be included in a react native project
var React = require(‘react-native‘);
Var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
//The entrance to the whole project
var AwesomeProject = React.createClass({
//How to render, and what to render, similar to layout files
render: function() {
Return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit index.android.js
</Text>
<Text style={styles.instructions}>
Shake or press menu button for dev menu
</Text>
</View>
);
}
};
//The style of layout type is not inherited from CSS, but only contains the properties of flexbox. Pay attention to documents when using
var styles = StyleSheet.create({
Container: {
Flex: 1,
justifyContent: ‘center‘,
alignItems: ‘center‘,
backgroundColor: ‘#F5FCFF‘,
}
Welcome: {
fontSize: 20,
textAlign: ‘center‘,
Margin: 10,
}
instructions: {
textAlign: ‘center‘,
color: ‘#333333‘,
marginBottom: 5,
}
};
//Register the main entry of the entire app
AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject)； 

• Index.ios.js
  Similar to the JS file in Android, can be modified in Xcodeproject

 
/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */ ‘use strict‘; var React = require(‘react-native‘); var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
} = React; var AwesomeProject = React.createClass({
  render: function() { return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit index.ios.js
        </Text>
        <Text style={styles.instructions}>
          Press Cmd+R to reload,{‘\n‘}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    );
  }
}); var styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: ‘center‘,
    alignItems: ‘center‘,
    backgroundColor: ‘#F5FCFF‘,
  },
  welcome: {
    fontSize: 20,
    textAlign: ‘center‘,
    margin: 10,
  },
  instructions: {
    textAlign: ‘center‘,
    color: ‘#333333‘,
    marginBottom: 5,
  },
});

AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject);

• Package script file Package.json
  React native is used by default to packager for packaging, this is the package file for packager, the content is as follows

{
  "name": "AwesomeProject",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node_modules/react-native/packager/packager.sh" },
  "dependencies": {
    "react-native": "^0.12.0" } }

Hello World

Ok here we ourselves try to write a Hello World Project program. Here we make modifications based on the generated index.android.js.

* *
* Sample React Native App
* https://github.com/facebook/react-native
* /
‘use strict‘;
var React = require(‘react-native‘);
Var {
AppRegistry,
StyleSheet,
Text,
View,
} = React;
var AwesomeProject = React.createClass({
render: function() {
Return (
//Place a text where sytle is myfont. Hello world
<Text style={[styles.myFont]} >
Hello World!
</Text>
);
}
};
//Define the font size of myfont style as 100
var styles = StyleSheet.create({
MyFont: {
fontSize:100,
}
};
AppRegistry.registerComponent(‘AwesomeProject‘, () => AwesomeProject); 

The results are as follows:

JavaScript based on the students should be able to see, although the program does not use CSS, but the syntax and formatting are very similar to CSS, can be a subset of it.

The layout style of the render is very similar to that of the layouts file in Android. We believe that the simple contact can also be quickly started.

Commissioning note

It is worth mentioning that our entire project is written using JS, so all our projects do not need to be recompiled when debugging.

Directly click Reload JS can be, this is why the back said react native can complete the online HotPatch function, as shown:

Of course there is no error, the official said the simulator can press the F2 key is also able to reload js,genymotion under the use of?-M. I have not succeeded.

Let's be honest and run it again.

/*
* @author Zhoushengtao (Zhou San)
* @since October 11, 2015 1:34:20
* @weixin stchou_zst
* @blog http://blog.csdn.net/yzzst
* @ Exchange Learning QQ Group: 341989536
* @ Private qq:445914891
/

Copyright NOTICE: Reprint please mark: Http://blog.csdn.net/yzzst. This article for Bo Master original article, without Bo Master permission not reproduced.

[Reactnative Primer to Proficient]react Native First program Hello Word