react-navigation开发总结

21 阅读2分钟

打包的APK如何安装到android-studio模拟器上

//安装应用
adb install app-release.apk
// 卸载应用
adb uninstall com.navigation

压缩APK大小

  1. 代码混淆和压缩(至少缩减10M)
// filepath:android/gradle.properties
android.enableShrinkResourcesInReleaseBuilds=true
android.enableMinifyInReleaseBuilds =true
// 上述配置会在:filepath:android/app/build.gradle中被使用
   buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://reactnative.dev/docs/signed-apk-android.
            signingConfig signingConfigs.debug
            def enableShrinkResources = findProperty('android.enableShrinkResourcesInReleaseBuilds') ?: 'false'
            shrinkResources enableShrinkResources.toBoolean()
            minifyEnabled enableMinifyInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
            def enablePngCrunchInRelease = findProperty('android.enablePngCrunchInReleaseBuilds') ?: 'true'
            crunchPngs enablePngCrunchInRelease.toBoolean()
            signingConfig signingConfigs.release
        }
    }

  1. 启用 Hermes 引擎(强烈推荐,默认最新版本已经使用了)
  2. 使用 Split APK / App Bundle(按 ABI 分包)(### 用户下载时如何区分该下哪个? 方式一:通过 Google Play 发布(推荐) 如果你将这些分割后的 APK 上传到 Google Play,Play 商店会自动根据用户设备的 CPU 架构分发正确的 APK,用户完全无需手动选择。) 分包后的文件大小至少缩减50%

    Android 设备有不同的 CPU 架构(arm64-v8a, armeabi-v7a, x86_64 等),默认会打包所有架构的 native 库,导致体积膨胀。

file:path android/app/build.gradle
   splits {
        abi {
            reset()
            enable true
            universalApk false
            include "arm64-v8a", "armeabi-v7a" // 只包含主流架构
        }
    }

自定义抽屉菜单

function CustomDrawerContent(props: any) {
  const route = useRoute()
  const { state, navigation } = props;
  const currentRouteName = state.routes[state.index].name;
  return (
    <DrawerContentScrollView {...props}>
      {Menu.map((item, index) => {
        const isActive = item.route === currentRouteName;

        return (
          <Pressable
            key={item.route}
            onPress={() => {
              navigation.navigate(item.route); // 注意:直接 navigate 到 route name
              navigation.closeDrawer();
            }}
            style={{ padding: 16, backgroundColor: isActive ? '#e0e0e0' : 'transparent' }}
          >
            <Text style={{ color: isActive ? '#6200ee' : '#000', fontWeight: isActive ? 'bold' : 'normal' }}>
              {item.title}
            </Text>
          </Pressable>
        );
      })}
    </DrawerContentScrollView>
  );
  
  const MyDrawer = createDrawerNavigator({
  screens: {
    Settings: {
      screen: Settings,
      options: {
        headerShown: true,
        link: 'settings'
      }
    },
    Updates: {
      screen: Updates,
      options: {
        headerShown: true,
        headerShadowVisible: true
      }
    }
  },
  screenOptions: {
    drawerType: 'slide', // 👈 关键:启用“滑动推开”模式
    overlayColor: 'transparent', // 可选:移除半透明遮罩
    drawerStyle: {
      width: 280, // 抽屉宽度(可选)
    },
  },
  drawerContent: (props: any) => {
    return <CustomDrawerContent {...props} />
  }
});

本地打包应用

// 1.生成签名
keytool -genkeypair -v -storetype PKCS12 -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

//2. 将生成的签名放到 filepath://android/app/my-release-key.keystore位置

//3.国内发布使用apk格式的包。
打包命令:./gradlew bundleRelease
//4。google pay发布使用aab格式的包
打包命令./gradlew assembleRelease

expo远程打包

npx eas-cli@latest init --id 3525426f-cb83-40f8-95cc-461ab289322d npx eas-cli@latest build --platform all --auto-submit

image.png