React Native开发android应用

1、准备工作：

①首先搭建React Native环境，http://facebook.github.io/react-native/docs/getting-started.html

②用真机运行（我用华为荣耀6）。

③react-native run-android这句不需要执行。直接用Android Studio导入项目。

④开启服务器端：react-native start

⑤运行Android Studio中的该项目，会出现红屏。解决红屏需要：调出Dev Setting（华为荣耀6是摇晃手机调出Dev Setting），设置Debug的服务器地址与端口号。

2、开发前说明

①React Native遵循ES6规范。

ES6是对JavaScript的改进，但目前并不支持所有浏览器，所以在Web开发方面并不是很常用。React Native搭载ES6支持，所以完全不需要担心兼容性问题，请随意使用ES6元素import, from, class, extends, 和语法 () =>

如果不熟悉ES6，也没关系。语法看多了就会懂，或者点这个连接大致浏览一下this page

②React Native支持JSX语言

开发时除了会看到import，from等之外，还会有<Text>Hello World</Text>，这就是JSX语言。

3、开发Hello World

修改入口文件index.android.js：

import React, { Component } from 'react';
import { AppRegistry, Text } from 'react-native';

class HelloWorldApp extends Component {
  render() {
    return (
      <Text>Hello world!</Text>
    );
  }
}

AppRegistry.registerComponent('HelloWorldApp', () => HelloWorldApp);

运行android项目，即可看到Hello World!字样。

4、理解Hello World程序

①为什么入口文件是index.android.js文件。

通过项目中的AndroidManifest.xml得知主Activit为MainActivity，而MainActivity继承自ReactActivity：

public class MainActivity extends ReactActivity {

ReactActivity的onCreate方法调用了getReactNativeHost().getReactInstanceManager()方法：

mReactRootView.startReactApplication(
      getReactNativeHost().getReactInstanceManager(),//-----调用ReactNativeHost.java中的createReactInstanceManager()方法。
      getMainComponentName(),
      getLaunchOptions());
setContentView(mReactRootView);//---------------------将mReactRootView设置为布局。

getReactInstanceManager()方法调用了ReactNativeHost.java中的createReactInstanceManager()方法：

  public ReactInstanceManager getReactInstanceManager() {
    if (mReactInstanceManager == null) {
      mReactInstanceManager = createReactInstanceManager();
    }
    return mReactInstanceManager;
  }

---------
  protected ReactInstanceManager createReactInstanceManager() {
    ReactInstanceManager.Builder builder = ReactInstanceManager.builder()
      .setApplication(mApplication)
      .setJSMainModuleName(getJSMainModuleName())
      .setUseDeveloperSupport(getUseDeveloperSupport())
      .setInitialLifecycleState(LifecycleState.BEFORE_CREATE);

    for (ReactPackage reactPackage : getPackages()) {
      builder.addPackage(reactPackage);
    }

    String jsBundleFile = getJSBundleFile();
    if (jsBundleFile != null) {
      builder.setJSBundleFile(jsBundleFile);
    } else {
      builder.setBundleAssetName(Assertions.assertNotNull(getBundleAssetName()));
    }

    return builder.build();
  }

其中，setJSMainModuleName()方法就是配置入口JS的地方：

  /**
   * Returns the name of the main module. Determines the URL used to fetch the JS bundle
   * from the packager server. It is only used when dev support is enabled.
   * This is the first file to be executed once the {@link ReactInstanceManager} is created.
   * e.g. "index.android"
   */
  protected String getJSMainModuleName() {
    return "index.android";
  }

当然，IOS的react-native包中的getJsMainModuleName会指向“index.ios”。

②新建类都继承Component类

如上面HelloWorld代码中HelloWorldApp类，是继承自Component类，Component是react中的一个类。这样的子类可以使用标签形式（<HelloWorldApp>）被调用，可理解为android中的View组件。

另外每个类，都必须有reader()方法，且内部必须返回一个JSX代码块，以达到像android中View似的视图展示的目的。

③AppRegistry注册当前页面，并指示入口类。

https://github.com/facebook/react-native/blob/master/Libraries/AppRegistry/AppRegistry.js

1.registerConfig(config:Array<AppConfig>)  static 静态方法, 进行注册配置信息

2.registerComponent(appKey:string,getComponentFunc:ComponentProvider)  static静态方法，进行注册组件

3.registerRunnable(appKey:string,func:Function)  static静态方法 ，进行注册线程

4.registerAppKeys()  static静态方法，进行获取所有组件的keys值

5.runApplication(appKey:string,appParameters:any)  static静态方法, 进行运行应用

6.unmountApplicationComponentAtRootTag()  static静态方法，结束应用