React Native(1)

2次阅读
没有评论

搭建开发环境

参考： https://reactnative.cn/docs/environment-setup

安装node的LTS版本： https://nodejs.org/en/download

添加 C:\nodejs\ 到系统path

# 使用nrm工具切换淘宝源
npx nrm use taobao

# 如果之后需要切换回官方源可使用
npx nrm use npm

Yarn是 Facebook 提供的替代 npm 的工具，可以加速 node 模块的下载。装完 yarn 之后就可以用 yarn 代替 npm 了，例如用yarn代替npm install命令，用yarn add 某第三方库名代替npm install 某第三方库名.

npm install -g yarn

安装jdk17： https://github.com/adoptium/temurin17-binaries/releases/

添加如下路径到系统path： C:\jdk-17.0.9+9\bin

javac --version
javac 17.0.9

安装 Android Studio(可能需要代理), 按默认路径安装（如果安装其他路径，可能会碰到一些设置问题）： C:\Program Files\Android\Android Studio

https://developer.android.com/studio?hl=zh-cn

安装界面中选择"Custom"选项，确保选中了以下几项：

    Android SDK
    Android SDK Platform
    Android Virtual Device

Android SDK版本 36

配置 ANDROID_HOME 环境变量： C:\Users\Y\AppData\Local\Android\Sdk

系统path变量增加： C:\Users\Y\AppData\Local\Android\Sdk\platform-tools

创建项目：

d:
cd /
npx @react-native-community/cli init ReactNativeTestProject

输出：

√ Downloading template
√ Copying template
√ Processing template
√ Installing dependencies


  Run instructions for Android:
    • Have an Android emulator running (quickest way to get started), or a device connected.
    • cd "D:\ReactNativeTestProject" && npx react-native run-android

  Run instructions for Windows:
    • See https://microsoft.github.io/react-native-windows for the latest up-to-date instructions.

连接手机(开启usb调试，仅充电)，需要授权， 参考： https://reactnative.cn/docs/running-on-device

cd ReactNativeTestProject
adb devices
List of devices attached
10CFBD1TXxxxxxx unauthorized


adb devices
List of devices attached
10CFBD1TXxxxxxx device

第一次运行测试可能需要用代理安装缺失组件：

cd ReactNativeTestProject
yarn add react-native-cli
npx react-native run-android

gradle下载问题：

编辑 D:\ReactNativeTestProject\android\gradle\wrapper\gradle-wrapper.properties 文件

将

distributionUrl=https\://services.gradle.org/distributions/gradle-9.0.0-bin.zip

替换为

distributionUrl=https\://mirrors.cloud.tencent.com/gradle/gradle-9.0.0-bin.zip

安装 IntelliJ IDEA

安装插件：

    进入IntelliJ IDEA的插件市场，搜索并安装以下插件：
        React Native
        JavaScript
        Node.js

配置运行环境：

    在IntelliJ IDEA中，点击“Run”菜单，选择“Edit Configurations”。
    添加一个新的“Node.js”配置，设置“JavaScript file”为项目目录下的index.js。
    在“Application parameters”中添加android，以便启动安卓模拟器。

打包

参考： https://reactnative.cn/docs/signed-apk-android

d:
cd D:\ReactNativeTestProject\
C:\jdk-17.0.9+9\bin\keytool.exe --genkeypair --v --storetype PKCS12 --keystore my-release-key.keystore --alias my-key-alias --keyalg RSA --keysize 2048 --validity 10000
输入密钥库口令:mishikukouling
再次输入新口令:mishikukouling
您的名字与姓氏是什么?
  [Unknown]:  Ming Xing
您的组织单位名称是什么?
  [Unknown]:  ORG Name
您的组织名称是什么?
  [Unknown]:  ORG Name
您所在的城市或区域名称是什么?
  [Unknown]:  City
您所在的省/市/自治区名称是什么?
  [Unknown]:  Province
该单位的双字母国家/地区代码是什么?
  [CN]:  CN
CN=Ming Xing, OU=ORG Name, O=ORG Name, L=City, ST=Province, C=CN是否正确?
  [否]:  Y

正在为以下对象生成 2,048 位RSA密钥对和自签名证书 (SHA256withRSA) (有效期为 10,000 天):
         CN=Ming Xing, OU=ORG Name, O=ORG Name, L=City, ST=Province, C=CN
[正在存储my-release-key.keystore]

这条命令会要求你输入密钥库（keystore）和对应密钥的密码，然后设置一些发行相关的信息。最后它会生成一个叫做my-release-key.keystore的密钥库文件。

在运行上面这条语句之后，密钥库里应该已经生成了一个单独的密钥，有效期为 10000 天。–alias 参数后面的别名是你将来为应用签名时所需要用到的，所以记得记录这个别名。

注意：请记得妥善地保管好你的密钥库文件，一般不要上传到版本库或者其它的地方。

  • 把my-release-key.keystore文件放到你工程中的android/app文件夹下。
  • 编辑项目目录/android/gradle.properties（项目配置，只对所在项目有效）,添加如下的代码
MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=mishikukouling
MYAPP_RELEASE_KEY_PASSWORD=mishikukouling
  • 编辑你项目目录下的android/app/build.gradle

/**
 * Run Proguard to shrink the Java bytecode in release builds.
 */
def enableProguardInReleaseBuilds = true


...
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            storeFile file("D:/ReactNativeTestProject/android/app/my-release-key.keystore") // 确保路径正确 
            storePassword "mishikukouling"
            keyAlias "my-key-alias"
            keyPassword "mishikukouling"
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
...

删掉默认配置：

debug {
            storeFile file('debug.keystore')
            storePassword 'android'
            keyAlias 'androiddebugkey'
            keyPassword 'android'
        }

生成发行 APK 包:只需在终端中运行以下命令

cd android
gradlew assembleRelease

生成的 APK 文件位于android/app/build/outputs/apk/release/app-release.apk，它已经可以用来发布了。

android studio 设置顶部菜单栏一直显示

  • 打开 Android Studio，点击左上角的 “File” 选项。​
  • 在弹出的下拉菜单中，选择 “Settings”。​
  • 在弹出的设置窗口中，找到并点击左侧列表中的 “Appearance & Behavior”。​
  • 在展开的选项中，点击 “Appearance”。​
  • Main menu，找到 “Show main menue in a separate toolbar” 选项，并勾选它。​

代理

使用privoxy将socks代理转为http代理

增加虚拟设备

view，tool windows，Device Manager

配置参考： https://developer.android.com/studio/run/managing-avds?hl=zh-cn

Hello world示例：默认代码修改

app.tsx

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 */
//
// import { NewAppScreen } from '@react-native/new-app-screen';
// import { StatusBar, StyleSheet, useColorScheme, View } from 'react-native';
// import {
//   SafeAreaProvider,
//   useSafeAreaInsets,
// } from 'react-native-safe-area-context';
//
// function App() {
//   const isDarkMode = useColorScheme() === 'dark';
//
//   return (
//     <SafeAreaProvider>
//       <StatusBar barStyle={isDarkMode ? 'light-content' : 'dark-content'} />
//       <AppContent />
//     </SafeAreaProvider>
//   );
// }
//
// function AppContent() {
//   const safeAreaInsets = useSafeAreaInsets();
//
//   return (
//     <View style={styles.container}>
//
//       <NewAppScreen
//         templateFileName="App.tsx"
//         safeAreaInsets={safeAreaInsets}
//       />
//     </View>
//   );
// }
//
// const styles = StyleSheet.create({
//   container: {
//     flex: 1,
//   },
// });
//
// export default App;

import React from 'react';
import { Text, View } from 'react-native';

const HelloWorldApp = () => {
    return (
        <View style={{
            flex: 1,
            justifyContent: 'center',
            alignItems: 'center'
        }}>
            <Text>Hello, world!</Text>
            <Text>你好，世界!</Text>
        </View>
    );
}

export default HelloWorldApp;

正文完
 0
评论（没有评论）

近期文章

近期评论

您尚未收到任何评论。