React Native項目結構

一、概念

在react-native項目中包含了android和ios的完整的項目結構，可以通過android studio和xcode進行打開和運作，是以可以通過webstorm直接打開react-native的整個項目，然後通過android studio進行打開android項目，用android studio編譯運作，在webstorm進行開發。

二、react native項目結構

1. android檔案夾有完整的android項目，可以使用android studio打開，ios檔案夾有完整的ios項目，可以用xcode打開。
2. index.android.js和index.ios.js是入口檔案

三、代碼流程

（1）、JS入口（以index.android.js為例）

import React, { Component } from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View
    } from 'react-native';

    export default class hello_world extends Component {
      render() {
        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}>
              Double tap R on your keyboard to reload,{'\n'}
              Shake or press menu button for dev menu
            </Text>
          </View>
        );
      }
    }

    const 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('hello_world', () => hello_world);
           

1. class hello_world extends Component：建立APP，并且在render函數中傳回UI界面結構。這是定義了一個hello_world的類，裡面隻有一個渲染函數。
2. const styles = StyleSheet.create：建立CSS樣式
3. AppRegistry.registerComponent(‘hello_world’, () => hello_world);這個才是JS 程式的入口。即把目前APP的對象注冊到AppRegistry元件中， AppRegistry元件是js module。