RN相关知识整理

最新推荐文章于 2025-01-22 11:22:42 发布

嘘1987

最新推荐文章于 2025-01-22 11:22:42 发布

阅读量548

点赞数

CC 4.0 BY-SA版权

文章标签： react native

本文链接：https://blog.youkuaiyun.com/shyzh_li/article/details/80662458

本文介绍了如何解决在Windows上调试React Native (RN)工程时出现的问题，以及RN工程在iOS和Android平台的打包发布流程。针对Android调试，提供了解决'Unable to load script from assets index.android.bundle'的方法，包括创建assets目录并执行bundle命令。对于iOS和Android的打包，详细说明了从生成资源文件到修改配置的完整步骤，确保工程能够顺利打包发布。

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

FlatList实现Grid布局：初始化<FlatList/>配置flatList的contentContainerStyle属性为{flexDirection：‘column’}，然后配置numColumns属性来确定每行显示的个数，即可实现grid样式的布局.

react-navigation配置导航头，页面跳转的时候，android端默认的页面切换方式是类似ios中modal样式的效果，如果要实现android页面切换水平滑动，需要配置一下选项：

mode:'card',
transitionConfig:()=>({
    screenInterpolator: CardStackStyleInterpolator.forHorizontal,
})

数字格式化方法：（如：12,312,312,331.98）

numberFormat(number) {
    if (Platform.OS === 'ios') {
        return number.toLocaleString();
    }
    return number.toString().replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,');
}

android调试RN工程出现’Unable to load script from assets index.android.bundle on windows‘问题的解决方法：

1，在android目录下的app/src/main/中创建assets目录 mkdir android/app/src/main/assets

2，执行命令：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

3，执行成功后运行android程序即可。

iOS和Android RN工程打包发布流程：

一、iOS RN工程打包流程：

1、在RN工程根目录下创建release_ios文件夹。

2、在根目录下用终端执行命令：react-native bundle --entry-file index.js --platform ios --dev false --bundle-output release_ios/main.jsbundle --assets-dest release_ios/

3、执行成功后将生成的assets目录和main.jsbundle文件添加到xcode工程中，添加完成后的文件夹必须是蓝色的

4、修改RN入口地址：NSURL *jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"main" withExtension:@"jsbundle"];

5、如果有加载本地的html，会在assets文件中看到对应的html，如果html中链接了本地的js或者css等文件，需要将对应的js和css等文件拷贝到assets中，这样本地的html才可以正确的找到链接的文件。

6、工程配置完成，正常打包即可

注：如果打包过程中遇到一些rn文件找不到的错误，第一是确定相关的search Path是否设置正确，第二在工程的Build Phases中的Target Dependencies下添加React依赖库

二、Android RN工程打包流程：

1、生成app的keystore文件：通过Android Studio生成，Build-Generate Signed APK...-Create new，选择存储的路径，填写相关的密码和昵称，点击ok

2、在android工程目录下的app/build.gradle文件，在android下增加签名信息：

signingConfigs {
releaseConfig {
keyPassword '123123'
storeFile file('/Users/leo/Desktop/test2')
keyAlias 'test'
storePassword '123123'
}

}

buildTypes {
release {
minifyEnabled true
proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
signingConfig signingConfigs.releaseConfig
}

}

3、RN工程根目录下执行命令：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/

如果assets目录不存在，手动创建一个

4、执行成功后，执行命令：cd android && ./gradlew assembleRelease

5、打包成功安装即可

注：如果集成了Echarts库，需要把tpl.html文件拷贝到android 中的assets目录下，将echarts中的index.js文件中webview的source修改为：source={{uri:'file:///android_asset/tpl.html'}}(针对android release模式，debug模式不需要修改)