05
2017
10

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。
上一篇:ResourceManager(六)—— ResourcesManager 下一篇:将项目上传到github