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

本文详细介绍了如何从零开始搭建一个React Native Android项目,包括创建项目、配置环境、添加依赖等关键步骤,并解决了可能出现的警告问题。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

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 " > react-native@0.59.5" has unmet peer dependency "react@16.8.3".
执行yarn add react@16.8.3  创建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<ReactPackage> getPackages() {
            return Arrays.<ReactPackage>asList(
                    new MainReactPackage()
            );
        }

    };

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

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

}

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值