一、概念

在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 (          
               
    
                   Welcome to React Native!            
                
    
                   To get started, edit index.android.js            
                
    
                   Double tap R on your keyboard to reload,{'\n'}              Shake or press menu button for dev menu            
              
           );      }    }    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。

转载地址：http://voajn.baihongyu.com/

你可能感兴趣的文章