React Native编译常见问题解决和官方demo分析

执行react-native run-android后会出现SDK location not found. Define location with sdk.dir in the local.properties file or with an ANDROID_HOME environment variable.如下所示:

原因：直接获取官方demo的android工程下无SDK路径配置信息文件

解决方案：在官方demo的android工程下创建一个local.properties文件用来配置SDK路径信息即可

在执行完react-native run-android命令编译完成之后，安装apk到手机上如果界面出现红色错误，提示如下信息：

unable to load script from assets index.android.bundle

原因：这是因为RN虽然是使用js开发，但是RN不是一个简单的web app或者h5 app，而是一个真正的原生的app。所以RN并不是简单的把App.js和index.js打包进apk，然后运行，而是会在编译过程中把js文件转换为bundle文件。在运行的时候会从apk的assets目录下加载这些bundle文件。所以需要提供bundle文件。

解决方案：首先在项目的android/app/src/main/目录下创建一个assets目录。然后执行如下命令：

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res

更详细的讲解可参看：https://stackoverflow.com/questions/44446523/unable-to-load-script-from-assets-index-android-bundle-on-windows

如果命令行输处Done writing bundle output表明该命令被正确执行完成，此时命令行输出类似如下所示：

命令正确执行之后会在android/app/src/main/assets目录下生成一个index.android.bundle的文件和与之相对应的meta文件。然后重新执行react-native run-android即可。

如果命令未能被正确执行，出现Unable to resolve module 'AccessibilityInfo'请参看下面对应的解决方法。

如果在执行创建bundle文件命令不成功，出现Unable to resolve module 'AccessibilityInfo'提示，此时命令行输出类似如下：

可以看到输出中给了4种可能的解决办法。但是只有如下命令有效。

npm start  -- --reset-cache

因为其余的3个可能的解决方法的命令都是linux上和mac上才有的命令。

首先分析下js入口index.js

import { AppRegistry } from 'react-native';
import App from './App';

AppRegistry.registerComponent('AwesomeProject', () => App);

这里的代码就是ES6标准的js语法，import的作用和python中的import类似，主要是引入其他js模块，第二个import语句就是引入了App.js这个模块。AppRegistry.registerComponent('AwesomeProject', () => App);这句就是注册了一个叫做App的组件，将该组件作为AwesomeProject的根组件。这是RN中js的一个API，其主要作用就是将第二个参数传入的js组件作为第一个参数传入的字符串对应的安卓原生界面的根组件（第一个参数的值需要和安卓java代码中继承自ReactActivity的原生Activity中getMainComponentName返回值保持一致，这在后面的官方demo安卓部分代码分析中会进一步讲到），关于该API更详细信息可以参看官方文档https://facebook.github.io/react-native/docs/appregistry。

()=>是js中的箭头函数语法，可以理解为无参的匿名函数。不清楚的可以查阅：https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Functions/Arrow_functions

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View
} from 'react-native';

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </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,
  },
});

这里的语法就是JSX的语法，即可以将html标签和css格式与js代码混在一起使用。不清楚的可以回过头去看下我最开始提到的学习RN需要知道的几个前置知识点。

export default class App extends Component<Props>

这里的继承语法和java类似，是ES6标准的js语法，后面的Component时React.js的一个组件类，一般我们写的该组件都会继承该类，然后重写该组件的render，在该方法中返回我们要显示的UI视图即可。可以看到官方的dmeo中简单的返回了一个View视图，该View视图包括3个文本控件，然后通过css样式为这3个文本控件指定UI属性。比如对齐属性，字体大小，字体颜色等。

package com.awesomeproject;

import android.app.Application;

import com.facebook.react.ReactApplication;
import com.facebook.react.ReactNativeHost;
import com.facebook.react.ReactPackage;
import com.facebook.react.shell.MainReactPackage;
import com.facebook.soloader.SoLoader;

import java.util.Arrays;
import java.util.List;

public class MainApplication extends Application implements ReactApplication {

  private final ReactNativeHost mReactNativeHost = new ReactNativeHost(this) {
    @Override
    public boolean getUseDeveloperSupport() {
      return BuildConfig.DEBUG;
    }

    @Override
    protected List<ReactPackage> getPackages() {
      return Arrays.<ReactPackage>asList(
          new MainReactPackage()
      );
    }

    @Override
    protected String getJSMainModuleName() {
      return "index";
    }
  };

  @Override
  public ReactNativeHost getReactNativeHost() {
    return mReactNativeHost;
  }

  @Override
  public void onCreate() {
    super.onCreate();
    SoLoader.init(this, /* native exopackage */ false);
  }
}

实现RN中的ReactApplication接口，创建了一个ReactNativeHost的内部类，然后在重写的getReactNativeHost方法中返回该内部类对象。该内部类中有一个很重要的方法getJSMainModuleName，其返回值即是app运行后加载js代码时的入口模块名称。比如官方demo是index.js。所以返回值是index。

package com.awesomeproject;

import com.facebook.react.ReactActivity;

public class MainActivity extends ReactActivity {

    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected String getMainComponentName() {
        return "AwesomeProject";
    }
}

这个就更简单了，只是继承自ReactActivity，然后重写了其getMainComponentName方法，返回了一个字符串内容。然后从该方法的注释上可以看到其作用是返回从js中注册的主组件的名称，用于调度组件渲染。这里返回的字符串的内容即是index.js中调用AppRegistry.registerComponent('AwesomeProject', () => App);注册时的内容。也即用该API的第二个参数传入的js组件作为第一个参数所代表的安卓界面的根组件。从而知道安卓java层的Activity对应的根视图是js层的哪个js组件。