Android 开发ReactNative入门

今天下午鼓捣了三个小时终于把rn的hello world弄出来了，感觉rn开发步步都是坑啊，所以记录一下。

第一步：新建一个普通的安卓项目。

清单文件中加入权限

<uses-permission android:name="android.permission.INTERNET"/>
<uses-permission android:name="android.permission.SYSTEM_ALERT_WINDOW" />
<!--开发者设置界面-->
<activity android:name="com.facebook.react.devsupport.DevSettingsActivity"/>

在app/src/main目录下新建assets文件夹（之后会在这个文件夹里生成两个文件）

第二步：在项目根目录下生成package.json文件
在AandroidStudio中的Terminal中（根目录）输入npm init 命令。按照提示输入内容，然后一直回车。生成内容如下图所示：

第三步：在AandroidStudio中的Terminal中（根目录）输入执行npm intall 引入rn模块文件

此处如果引入rn失败再次引入时最好删除缓存文件，如下箭头处

第四步：在项目根目录build.gradle文件中加入如下代码

maven {
// All of React Native (JS, Android binaries) is installed from npm
    url"$rootDir/node_modules/react-native/android"
}

第五步：在app模块下build.gradle文件中加入

compile"com.facebook.react:react-native:+"// From node_modules. 依赖

同时在android -> defaultConfig 中添加

ndk{
 abiFilters "armeabi-v7a","x86"
}

##同步项目，然后进行如下操作，否则无法导包

第六步：新建RnActivity 继承ReactActivity

新建RnApplication 并在清单文件中引用

public class RnApplication extends Application implements ReactApplication {
    private ReactNativeHost mReactNativeHost=new ReactNativeHost(this) {
        @Override
        public boolean getUseDeveloperSupport() {
            return BuildConfig.DEBUG;
        }

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

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

第七步：
在项目根目录下新建index.android.js文件 将如下代码复制到文件中，并在根目录下terminal中运行如下命令（在assets文件夹中生成两个文件，每次修改完rn代码后都必须运行此命令然后运行apk，修改的后的rn代码才能生效）。

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

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

class HelloWorldApp extends Component {
    render() {
    return (
      <Text> 你好RN!</Text>
    );
 }
}
// 注意，这里用引号括起来的'HelloRN'必须和你init创建的项目名一致，即图三箭头处代码一致
AppRegistry.registerComponent('HelloRN', () => HelloWorldApp);

第八步：在terminal（项目根目录）中执行如下命令，启动js-service
react-native start
如图显示React packager ready即显示js service 启动成功

如果遇到下图错误

按提示执行命令即可
lsof -i :8081   //找出使用8081端口的进程
kill -9 <PID> //杀掉占用8081端口的其他进程
//再次运行命令
react-native start 

最后运行app到手机即可