The React-native Learning app

1. Initialization of the project:

React-native Init MyProject

2. Start the project:

CD myprojectreact-native start

New Open cmd window:

React-native run-android

3. Source Code Analysis:

Attach Index.android.js file:

/** Sample React Native App *https://github.com/facebook/react-native */import React, {Component} from 'react'; import {appregistry, StyleSheet, Text, View} from 'react-native';classMyProject extends Component {render () {return (            <view style={styles.container}> <text style={styles.welcome}>Welcome to React Native! </Text> <text style={styles.instructions}> toGetstarted, edit index.android.js</Text> <text style={styles.instructions}>Shake or press menu button forDev menu! This isEnable hot! </Text> </View>        ); }}ConstStyles =stylesheet.create ({container: {flex:1, Justifycontent:'Center', Alignitems:'Center', BackgroundColor:'#F5FCFF'}, welcome: {fontSize: -, TextAlign:'Center', margin:Ten}, instructions: {textAlign:'Center', Color:'#333333', MarginBottom:5    }}); Appregistry.registercomponent ('MyProject', () = MyProject);

First import introduces React|react-native's related component modules so that when we customize components we can directly return elements of the react itself (react component customization, you must implement the Render method and return a REACT element, And there is only one contained top-level element)

Then inherit the component component through extends, implement the Render method, return a REACT element containing the view layout, embedded three text controls, as to the style definition of the text component, consistent with react, Can be a valid JS expression or object enclosed in curly braces, such as styles, and finally passed

Appregistry.registercomponent the component registration is exposed to use ...

4, the real run, you can shake the phone, in the Popup tool box select Reload JS, the re-installation of JS code, you can directly see the modified operation effect, you can also click to select the "Support Hot update", so that the IDE update, the app side automatically update the effect ...

The React-native Learning app