React Native项目结构

一、概念

在react-native项目中包含了android和ios的完整的项目结构，可以通过android studio和xcode进行打开和运行，所以可以通过webstorm直接打开react-native的整个项目，然后通过android studio进行打开android项目，用android studio编译运行，在webstorm进行开发。

二、react native项目结构

android文件夹有完整的android项目，可以使用android studio打开，ios文件夹有完整的ios项目，可以用xcode打开。

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);

class hello_world extends Component：创建APP，并且在render函数中返回UI界面结构。这是定义了一个hello_world的类，里面只有一个渲染函数。

const styles = StyleSheet.create：创建CSS样式

AppRegistry.registerComponent(‘hello_world’, () => hello_world);这个才是JS 程序的入口。即把当前APP的对象注册到AppRegistry组件中， AppRegistry组件是js module。