思路：官文是采用在項(xiàng)目基礎(chǔ)上生成React結(jié)構(gòu)，但問題頗多并不靠譜。生成React-Native項(xiàng)目然后替換android包更方便快捷。當(dāng)前轉(zhuǎn)換基于0.48版本。

新建項(xiàng)目

react-native init xxx

替換項(xiàng)目

刪除RN項(xiàng)目下android文件夾，將原生項(xiàng)目復(fù)制到RN項(xiàng)目路徑下，并改名為android

配置settings.gradle

在最上方添加

rootProject.name = '項(xiàng)目名'

項(xiàng)目build.gradle中添加maven依賴

allprojects {
    repositories {
        jcenter()
        mavenLocal()
        maven {
            // All of React Native (JS, Obj-C sources, Android binaries) is installed from npm
            url "$rootDir/../node_modules/react-native/android"
        }
    }
}

gradle版本設(shè)置(可選）

設(shè)置gradle版本為4.3保證編譯效率

路徑gradle\wrapper\gradle-wrapper.properties

distributionBase=GRADLE_USER_HOME
distributionPath=wrapper/dists
zipStoreBase=GRADLE_USER_HOME
zipStorePath=wrapper/dists
distributionUrl=https\://services.gradle.org/distributions/gradle-4.3-all.zip

項(xiàng)目的build.gradle設(shè)置

設(shè)置gradle的tools版本為3.0.0與gradle版本相呼應(yīng)

buildscript {
    repositories {
        jcenter()
        google()
    }
    dependencies {
        classpath 'com.android.tools.build:gradle:3.0.0'
    }
}

編譯環(huán)境設(shè)置

項(xiàng)目module中設(shè)置編譯版本

使用gradle4.3必須要將buildToolsVersion升級為26以上

compileSdkVersion 25
buildToolsVersion "26.0.2"

app的build.gradle增加ndk限制

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

app的build.gradle增加依賴

dependencies {
    ...
    compile "com.facebook.react:react-native:+"  // From node_modules
    ...
}

Application配置

需要注意的是0.48正式版新增了一個getJSMainModuleName方法來定位主模塊入口

public class App extends Application implements ReactApplication{
    private static App mApp;

    public static App getInstance() {
        return mApp;
    }

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

    //初始化react-native
    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;
    }

}

測試Activity設(shè)置

注意，一定要在根目錄進(jìn)行

public class MainActivity extends ReactActivity {

    @Override
    protected String getMainComponentName() {
        return "Yuwen";
    }
}

Manifest.xml配置

<manifest xmlns:android="http://schemas.android.com/apk/res/android"
    package="com.tfedu.yuwen">
    
    <!--必要權(quán)限-->
    <uses-permission android:name="android.permission.INTERNET" />
    <uses-permission android:name="android.permission.WRITE_SETTINGS" />
    <uses-permission android:name="android.permission.ACCESS_WIFI_STATE" />
    <uses-permission android:name="android.permission.ACCESS_NETWORK_STATE" />

    <!--不要忘記設(shè)置name-->
    <application
        android:name=".App"
        android:allowBackup="true"
        android:icon="@mipmap/ic_launcher"
        android:label="@string/app_name"
        android:supportsRtl="true"
        android:theme="@style/AppTheme">
        
        <!-- React測試頁面 -->
        <activity android:name=".MainActivity">
            <intent-filter>
                <action android:name="android.intent.action.MAIN" />

                <category android:name="android.intent.category.LAUNCHER" />
            </intent-filter>
        </activity>
        <!-- React設(shè)置頁面 -->
        <activity android:name="com.facebook.react.devsupport.DevSettingsActivity" />
        
    </application>

</manifest>

運(yùn)行

所有設(shè)置配置好后在根目錄下執(zhí)行指令react-native run-android就能運(yùn)行了~