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。