初探react-native Hello World

一、开端

按照react-native的教程配置好开发环境后只要执行以下步骤，即可创建第一个react native的hello world工程

1.    打开命令窗口，在你想要保存工程的位置执行: react-native init CameraProject

2.    创建好工程后，先删除react-deep-force-update/.babelrc，这是因为React Native升级了babel6，babel6对babelrc文件的解析有变更，而其他第三方组件还没有跟上这个变化，如果没有删除，运行的时候就会提示客户端无法下载js bundle。

3.    终端上执行：react-native run-android,另外打开一个终端，切换到工程目录下，执行：react-native start

4.    编译安装后即可在客户端看到react-native hello world的界面。（注意android5.0以下的需要配置dev setting 的主机端server ip&port，android 5.0以上的机器可以执行adb reverse tcp:8081 tcp:8081使用USB代替wifi 网络）

二、开发工具

webstorm + android studio

其中webstorm可以编辑管理JS代码，android studio开发native的module，但是要注意，android studio open project的时候只要指向CameraProject/android路径，不可直接import 整个CameraProject，否则可能导致整个工程坏掉。

三、工程架构初步认识

以下是react-native的hello world 工程

1.android&ios目录下放的是native的工程文件；

2.node_modules目录放的是react-native官方的组件库，或者以后在我们开发过程中根据具体需求自定义的native组件库都可以放到这个目录下，以后再详细说如何自定义native组件及如何添加到工程里。

3.index.android.js与index.ios.js分别为android和ios js代码入口，下面小弟初略解析一下index.android.js

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 */
'use strict' ;
import React , {
  AppRegistry ,
  Component ,
  StyleSheet ,
  Text ,
  View
}  from  'react-native' ;  //中括号内分别标明了将会使用react-native 库里的哪些组件，这里的功能相当于java的import和C的#include

class CameraPorject  extends Component {
  render() {    //渲染函数，画面需要显示什么将由这里决定
    return (
      <View  style ={styles. container} >  //定义最大的那个显示容器的格式为container
        <Text  style ={styles. welcome} >  //定义第一行字的格式及内容，以下类推
          Welcome to React Native!
        </Text>
        <Text  style ={styles. instructions} >
          To get started, edit index.ios.js
        </Text>
        <Text  style ={styles. instructions} >
          Press Cmd+R to reload,{ ' \n '}
          Cmd+D or shake for dev menu
        </Text>
      </View>
    ) ;
  }
}

const styles = StyleSheet. create({
  container: {
    flex:  1 ,  //flex 布局，类似于android xml里面的weight属性
    justifyContent:  'center' ,  //上下居中
    alignItems:  'center' ,  //左右居中
    backgroundColor:  '#F5FCFF' ,  //背景颜色
  } ,
  welcome: {
    fontSize:  20 ,
    textAlign:  'center' ,
    margin:  10 ,
  } ,
  instructions: {
    textAlign:  'center' ,
    color:  '#333333' ,
    marginBottom:  5 ,
  } ,
}) ;

AppRegistry. registerComponent( 'CameraPorject' , () => CameraPorject) ;  //注册CameraProject组件