移动混合开发-测试创建项目过程_最终版本

1.项目目录下,创建android项目Vnext
2.项目目录下,执行npm init创建package.json
修改:"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
}
3.项目目录下,执行npm install 创建package-lock.json
4.项目目录下,执行yarn add react-native  创建node_modules
报警告:
warning " > [email protected]" has unmet peer dependency "[email protected]".
执行yarn add [email protected]  创建16.8.3版本的react

5.配置maven仓库
整个工程的build.gradle
在项目根目录下的 build.gradle 文件中为 React Native 添加一个 maven 依赖的入口,必须写在 "allprojects" 代码块中
allprojects {
    repositories {
        google()
        jcenter()

        maven {
            url "$rootDir\\node_modules\\react-native\\android"  //node_modules前面没有..  !!否则 ReactApplication 不识别
        }
    }
}

6.配置app的build.gradle

android {
    compileSdkVersion 28
    defaultConfig {
        ...

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

    }
   
}

dependencies {
    ...

    implementation "com.facebook.react:react-native:+"
}

7.项目目录下,配置
(1)app.json  name的值要保持和android MyReactActivity方法中的一致。
(2)index.js
(3)App.js

8.先创建assets文件夹,再生成index.android.bundle
react-native bundle --platform android --entry-file index.js --bundle-output app/src/main/assets/index.android.bundle --dev false

//官方文档:
react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/com/your-company-name/app-package-name/src/main/assets/index.android.bundle --assets-dest android/com/your-company-name/app-package-name/src/main/res/

9.启动,打包后不需要,调试时需要。
npm start

10.配置Application到AndroidManifest.xml文件中标签为application中添加android:name=".MainApplication":

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

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

    };

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

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

}

你可能感兴趣的:(移动混合开发-测试创建项目过程_最终版本)