The React-native Learning app

Source: Internet
Author: User

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

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.