ReactNative 打包发布 Android 应用

Posted 2023-04-21 rogerwu

一、创建应用签名

1、在 Android Studio 菜单栏中，依次点击 Build  > Generate Signed Bundle/APK

 

2、在 Generate  Signed Bundle or APK 对话框中，选择 APK，点击 Next 按钮

 

3、在 Key store path 字段下，点击 Create new 按钮

 

4、在 New Key Store 窗口中，点击右侧文件夹图标

 

5、在 Choose keystore file 窗口中，选择创建密钥库的位置，然后添加一个扩展名为 .jks 的文件名。选择需要发布的应用，依次找到 android > app，在 File name 中输入签名，如 my-release-key

 

6、在 New Key Store 窗口中，依次输入密码，密钥别名和证书等信息，点击 Ok 按钮

 

7、输入密钥密码，别名和别名密码，点击 Cancel 按钮生成密钥和密钥库

 

二、使用密钥为应用签名

1、在 Android Studio 菜单栏中，依次点击 File  > Project Structure

 

2、在 Project Structure 窗口中，依次选择 Modules > app > Signing Configs

 

3、点击 + 按钮，新增一个签名配置 realease （此处是笔误，尽量注意正确的拼写 release）

 

 4、选中 release，然后把滚动条滑动到最右边，在 Store File 中选择密钥

 

5、依次输入密码、密钥别名和别名密码，并点击 Ok 按钮

 

 6、打开 android > app > build.gradle 文件，可以看到在 signingConfigs 对象中新增了一个 realease 对象，如下图所示

 

7、根据 signingConfigs 的配置修改 buildTypes 的配置信息，将 buildTypes 中 release 的 signingConfigs.debug 改成 signingConfigs.realease

 

8、修改并保存文件，点击编辑器右上角的 Sync Now 按钮同步更新

 

三、打 release 包并安装发布

1、在 Android Studio 编辑器底部找到 Terminal 命令行工具，切到 android 目录下，输入指令 " ./gradlew assembleRelease "，等待构建完成

 

2、构建完成后，在 android > app > build > outputs > apk 目录下会生成一个 release 目录，包含 app-release.apk

 

3、用USB数据线连接好电脑和安卓手机（鸿蒙也可以，本次使用的是荣耀 X10），并打开 开发者模式，勾选 USB 调试， 选择 USB 配置为 MTP（多媒体传输）,在 Android Stuido 命令行工具中执行指令 " adb install ./app/build/outputs/apk/release/app-release.apk " 即可在安卓手机上安装好应用

 

 

ReactNative简介开发环境调试常用组件useState状态FlatList组件SectionList组件Platform 模块定义样式图片组件触摸事件打包apk发布版

ReactNative简介：

ReactNative是基于React语法来进行开发移动app的框架；

ReactNative中提供了移动端专用的一些组件，我们要使用ReactNative固有的组件代替网页中使用的一些元素，如：div, p, img 都不能用了；

React Native 组件就是对原生视图的封装，因此使用 React Native 编写的应用外观、性能等与其他任何原生应用一样。

开发环境：

无论是什么开发平台，搭建android环境都需依赖：Node、JDK 和 Android Studio（获得编译android的工具和环境）；

搭建ios环境只允许使用macOS作为开发平台，且依赖：Node、Watchman、Xcode（获得编译iOS的工具和环境） 和 CocoaPods；

具体环境配置可阅读：https://blog.csdn.net/weixin_46758988/article/details/117967747

对项目进行说明：

	1.项目根目录下index.js(入口文件)中AppRegistry.registerComponent可用来设置应用名称和注册应用首页，一般引用app.json中的配置设置应用名。
    2.App.js为项目的首页，此文件中引用了其它组件。

创建一个index.js文件：

前面环境配置已经使用react-native-cli启动了一个项目，并打包成了apk文件，现在将介绍具体开发，这里从一个入口index.js文件开始：

	//1.因为是使用脚手架进行搭建的项目，因此直接修改业务代码即可，引入react如：
    import React from 'react';
    
    //2.在ReactNative中没有web中的标签，ReactNative中使用组件代替标签，这些组件是对原生组件的封装，使用具体的组件时，需要按需引入，如：
    import {Text,View,StyleSheet} from 'react-native';
    
    //3.使用react语法定义一个组件：
    class Header extents React.Component{
        render(){
            return(
            	<View>{/*view组件类似web中div*/}
                	<Text>hello</Text>
                </View>
            )
        }
    }
    export default Header;

在设备上运行（调试）：

开发中会经常对应用进行测试，已达到开发要求，因此需要不断的对其进行测试，要测试就要运行在移动设备或虚拟机上，其方法如：

	1.将手机等设备通过数据线连接到电脑上。
    2.开启手机USB调试。
    3.终端运行：adb devices,如果输入信息有设备，则表示连接成功。
    4.终端继续运行：npx react-native run-android 运行应用。（可运行：npx react-native run-android --variant=release安装release版，但是需要配置签名）

ReactNative中常用组件：

ReactNative中的组件在使用时应该按需从react-native中导入。

更多组件请阅读相关文档：https://www.react-native.cn/docs/components-and-apis
useState状态：

ReactNative中使用函数声明组件定义状态时，使用useState方法，具体使用如：

	//1.引入useState方法，使用大括号表示按需引入
    import React,{useState} from 'react';
    //2.初始化一个变量的值,可以是任意数据类型，这个值写在方法括号中,同时第二个参数为一个函数，用来更新设置状态的值，如：
    const Person = (props) => {
      const {personName,setName} = useState('jack')；
    }

FlatList组件：

	const Lists = () => {
      var lis=[
        {values: '1'},
        {values: '2'},
        {values: '3'}
      ]
      return (
        <View>
          <FlatList data={lis} renderItem={({item}) => <Text>{item.values}</Text>}/>{/*renderItem使用{}接收一个函数，函数中传递的参数为数据；data使用{}接收数据*/}
        </View>
      );
    }

SectionList组件：

	 const ListGroups = () => {
      const liGroup = [
        {title: 'Group1', data: ['1', '2', '3']},
        {title: 'Group2', data: ['a', 'b', 'c']},
      ]
        return (
          <View>
            <SectionList
            sections={liGroup}
            renderItem={({item}) => <Text>{item}</Text>}
            renderSectionHeader={({section}) => <Text>{section.title}</Text>}
            keyExtractor={(item, index) => item+'---'+index}
            />
          </View>
        );
    }

Platform 模块：

它是一个检测平台的模块，Platform.OS在iOS上返回ios，在安卓或模拟器返回android，因为部分组件是按平台区分的，不同的平台不能使用，此时可以借助Platform进行判断然后针对不同的平台写不同的代码，其用法如：

	// 1.引入Platform模块：
    import {Platform} from 'react-native';
    
    //2.针对不同的平台写不同的代码
      // 2-1：Platform.OS判断当前设备是否为ｉＯＳ，返回ｉＯＳ或ａｎｄｒｏｉｄ，如：
      const isIOS = Platform.OS === 'ios' ? true : false;
      console.log(isIOS);
    
      // 2-2：Platform.select()传入一个对象，对象的key值定义为ios或android, Platform.select会根据平台返回ios或android中key对应的值，如：
      const  Devices = Platform.select({
        ios:'这是ios设备',
        android:'这是android设备'
      });//利用它可以做出判断，在不同的平台上声明不同的组件：key后接一个函数或对象声明组件，它返回的就是key的value值
      console.log(Devices);
    
      // 2-3:Platform.Version用于检测平台版本，它返回一个数字或字符串，如：
      console.log('当前设备的版本号为：'+Platform.Version);
    
     // 2-4:Platform.isTV用于检测平台是否为TV。

特定平台扩展名:

当不同平台代码较为复杂时，不建议在一个文件夹中书写不同平台的代码，此时应该将android和ios的代码分不同的文件书写，ReactNative会根据平台自动加载.ios.js或.android.js和.native.js(针对web端复用文件)文件;因此,当针对不同平台需要开发较复杂或大量代码时，可以分文件存储代码,如针对不同平台的Header组件文件夹名：

	Header.ios.js
    Header.android.js
    
    //引入并使用Header组件：
    import Header from './components/Header';
    <Header/>

定义样式：

ReactNative中可以通过StyleSheet.create()创建一个样式对象，里面放一个对象，对象里面是键值对方式定义样式，如：

	 // 导入styleSheet模块：
    import {styleSheet} from 'react-native';
    // 定义一个样式对象，
    const style = styleSheet.create({
      box:{
        width:200,
        height:400
      },
      font:{fontSize:20,}
    })
    // 使用样式时，通过style.key即可，如：style.box

React Native 中使用 flexbox 规则来布局可以解决不同尺寸设备布局不一致问题，一般使用flexDirection、alignItems和 justifyContent即可满足常见的布局要求。

TV端应用：

React Native 应用只需在 JavaScript 端简单修改甚至无需修改，就能在电视和机顶盒设备运行，其做法为：

	 //1.在AndroidManifest.xml文件中加入以下配置代码：
     <application android:banner="@drawable/tv_banner"> //加入自定义的banner图作为TV设备上的图标
        <intent-filter>
          <category android:name="android.intent.category.LEANBACK_LAUNCHER"/>//当在android上运行时创建它
        </intent-filter>
      </application>

图片组件：

	<Image source={require('./img/check.png')} />
                   
    <Image source={{uri: 'app_icon'}} style={{width: 40, height: 40}} />
    
    //网络图必须设置宽高：
    <Image source={{uri: 'https://facebook.github.io/react/logo-og.png'}}
           style={{width: 400, height: 400}} />
    
    //背景图：
    <ImageBackground source={...} style={{width: '100%', height: '100%'}}>
        <Text>hello</Text>
    </ImageBackground>

触摸事件：

	// 1.Button是一个按钮组件,必须有title属性和onPress按下事件:
    <Button title = 'info' onPress={() => {Alert.alert('hello');}}/>

打包apk发布版：

Android 要求所有应用都有签名才会被允许安装在用户手机上，因此在上传到应用商店前，应先打包一个有签名的apk,其步骤如下：

	1.在javaJDK中bin目录下打开终端用于键入命令生成签名秘钥。
    2.在终端键入命令：keytool -genkeypair -v -keystore my-release-key.keystore -alias my-key-alias -keyalg RSA -keysize 2048 -validity 10000 ，这里使用keytool命令来生成一个秘钥文件，具体配置项说明：my-release-key.keystore（生成秘钥文件的文件名，需要保护，特别重要，.前面的名称可以修改）、my-key-alias（也很重要，需要记住，可以自定义此名称，应用签名用）、10000（表示签名有效时间，这里可以修改），没有说明的表示配置项的key,这里只是讲value做说明。
    3.键入上面命令后回车，此时会弹出一个输入口令，这里是无法看到的，记住自己输入的口令后回车（小编键入：123as******）
    4.输入口令后会填入相关信息，根据实际填写即可，大概模板如下图：
    5.生成的my-release-key.keystore文件在当前bin目录下。
    6.将生成的my-release-key.keystore文件复制到项目中android/app下。
    7.编辑项目中android目录下gradle.properties文件，对其新增配置后的代码如（输入自己生成秘钥文件时的相关信息）：
    	MYAPP_RELEASE_STORE_FILE=秘钥文件名
    	MYAPP_RELEASE_KEY_ALIAS=alias的值
    	MYAPP_RELEASE_STORE_PASSWORD=密码
    	MYAPP_RELEASE_KEY_PASSWORD=密码
    8.在项目中android/app/build.gradle文件中配置signingConfigs下debug,value为生成签名文件时的配置信息，如：
    	storeFile file('my-release-key.keystore')
         storePassword '生成时的密码'
         keyAlias 'my-key-alias'
         keyPassword '生成时的密码'
    9.终端切换到项目的android目录下，键入：./gradlew assembleRelease
    10.将项目中android\\app\\build\\outputs\\apk\\release目录下后缀为apk的文件上传到各大应用商店即可。

提示：本文图片等素材来源于网络，若有侵权，请发邮件至邮箱：[e-mail]联系笔者删除。
笔者：苦海