1 相关资料

2 环境安装

环境安装

3 React-native android打包

ReactNative mac 环境下的打包

终端输入

 cd /Library/Java/JavaVirtualMachines/jdk1.8.0_121.jdk/Contents/Home/bin

停留在此终端，执行密钥生成指令

sudo keytool -genkey -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000

-keystore my-release-key.keystore 设置密钥文件的名称，后面工程项目的配置文件会用到

-alias my-key-alias 设置密钥的别名，后面工程项目的配置文件会用到

输入密钥库口令 设置密码，后面工程项目的配置文件会用到

停留在此终端，执行密钥文件移动到工程项目

sudo mv my-release-key.keystore /Applications/gitWork/study_zone/ReactNative/android/app

/Applications/gitWork/study_zone/ReactNative/android/app 此路径为工程项目路径，可通过终端pwd指令获取

设置gradle变量

    signingConfigs {
        release {
            storeFile file('my-release-key.keystore')
            storePassword 'zxcasdqwe'
            keyAlias 'my-key-alias'
            keyPassword 'zxcasdqwe'
        }
    },
    
    buildTypes {
        release {
            // Caution! In production, you need to generate your own keystore file.
            // see https://reactnative.dev/docs/signed-apk-android.
            signingConfig signingConfigs.release
            minifyEnabled enableProguardInReleaseBuilds
            proguardFiles getDefaultProguardFile("proguard-android.txt"), "proguard-rules.pro"
        }
    }

这里面配置的信息都从生成密钥的配置里面获取。

5. 设置打包指令

...
  "scripts": {
    ...
    "build_android": "cd android && ./gradlew assembleRelease"
  },

在package.json里面设置打包指令

yarn build_android

等待十多分钟即可，生成的文件在这里面。

4 遇到的问题

4.1 根据文档执行 yarn android 报错

解决：在项目的根目录创建yarn.lock,在终端执行 yarn install。最后执行 yarn android

4.2 React Native needs Node.js >= 18. You're currently on version v14.18.2. Please upgrade Node.js to a supported version and try again. * Try:

解决：切换node版本，注意重启电脑，因为你wachman启动的时候，node版本可能就不对了。

4.3 如何引入图片？

解决：官方指引

4.4 如何像google浏览器一样调试页面？

解决：

console日志打印

元素样式调试工具react-devtools

在调试样式的时候，记得在模拟器终端按下 comman + m 选择

4.5 键盘弹框不会像web一样input失去焦点后，键盘就关闭

解决： RN手动关闭键盘

4.6 如何发送http请求？

解决：官方文档

4.7 如何进行google登录

blog.csdn.net/weixin_5206…

react-native-google-signin.github.io/docs/settin…

4.8 如何设置别名

引入babel-plugin-module-resolver

yarn add --dev babel-plugin-module-resolver

配置babel.config.js

module.exports = {
  presets: ['module:@react-native/babel-preset'],
  plugins: [
    ["module-resolver", {
      "root": ["./src"],
      "alias": {
        "src": "./src",
        "underscore": "lodash"
      }
    }]
  ]
}

配置tsconfig.json

{
  "extends": "@react-native/typescript-config/tsconfig.json",
  "compilerOptions": {
    "module": "es2020",
    "target": "ES2016",
    "jsx": "react",
    "baseUrl": "./",
    "resolveJsonModule": true,
    "allowSyntheticDefaultImports":true,
    "paths": {
      "@/*": ["src/*"],
      "src/*": ["src/*"]         
    },
    "moduleResolution":"node",
  },
}

4.9 如何引入全局状态管理库store

Redux Toolkit

5.0 如何设置页面路由

官方文档起步指导

官方文档移动端指导

库说明：

react-native-screens 导航组件的依赖库。
react-native-safe-area-context 导航组件的依赖库。
@react-navigation/native，导航组件的基础库。
@react-navigation/native-stack，导航堆栈库。
@react-navigation/bottom-tabs，底部导航组件

React-native学习