ReactNative

ReactNative是基于React这门框架语法来进行开发的,
需要使用RN提供的固有组件
最终,项目是要运行到手机端的,需要结合安卓的签名打包步骤,并受用RS提供的打包命令,进行完整apk文件的发布。
组件:
<View>
<Text>
<TextInput>
<Image>
<Button>
<ActivityIndicator>
....

ReactNative之Android打包APK方法

1、生成签名秘钥:
    你可以用keytool命令生成一个私有密钥。在Windows上keytool命令放在JDK的bin目录中(比如C:\Program Files\Java\jdkx.x.x_x\bin),
你可能需要在命令行中先进入那个目录才能执行此命令。

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

这条命令会要求你输入密钥库(keystore)和对应密钥的密码,然后设置一些发行相关的信息。最后它会生成一个叫做my-release-key.keystore的密钥库文件。
在运行上面这条语句之后,密钥库里应该已经生成了一个单独的密钥,有效期为10000天。--alias参数后面的别名是你将来为应用签名时所需要用到的,所以记得记录这个别名。

my-release-key.keystore   //表示要生成的签名文件的名称
my-key-alias        //根据需求改动
输入一系列参数,
秘钥口令:
......
这个签名默认保存在用户目录下:'C:\Users\....'
2、设置gradle变量:
把my-release-key.keystore文件放到你工程中的android/app文件夹下。
编辑~/.gradle/gradle.properties(没有这个文件你就创建一个),添加如下的代码(注意把其中的****替换为相应密码)
注意:~表示用户目录,比如windows上可能是C:\Users\用户名,而mac上可能是/Users/用户名。

MYAPP_RELEASE_STORE_FILE=my-release-key.keystore
MYAPP_RELEASE_KEY_ALIAS=my-key-alias
MYAPP_RELEASE_STORE_PASSWORD=*****
MYAPP_RELEASE_KEY_PASSWORD=*****
3、添加签名到应用的gradle配置中:
编辑你项目目录下的android/app/build.gradle,添加如下的签名配置:
...
android {
    ...
    defaultConfig { ... }
    signingConfigs {
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    buildTypes {
        release {
            ...
            signingConfig signingConfigs.release
        }
    }
}
...
4、修改app名称
进入:android/app/src/main/res/valuse/strings.xml目录下
<resources>
    <string name="app_name">你的APP名称</string>
</resources>
   修改app图标
进入:android/app/src/main/res/目录下,有类似mipmap-hdpi,mipmap-mdpi,mipmap-xhdpi,mipmap-xxhdpi,mipmap-xxxhdpi
等文件,这些文件下分别存有png格式的图片,图片大小分别为:72x72,48x48,96x96,144x144,192x192格式

5、修改app启动页
第一步:安装下载插件
1、npm i react-native-splash-screen --save
2、react-native link react-native-splash-screen  // 自动链接了,就不用手动配置了
执行完上面两条命令,在android/settings.gradle文件下会自动下面语句,请将下面的路径
中’…\node_modules\rn-splash-screen\android’单斜线改为双斜线表示。
include ':rn-splash-screen'
project(':rn-splash-screen').projectDir = new File(rootProject.projectDir, '..\\node_modules\\rn-splash-screen\\android')
第二步:在android中进行相关配置
1、在android/app/src/main/java/com/xxx/MainActivity.java 文件中添加所示的代码
package xxxx;
import android.os.Bundle;                            //  添加  第一处
import com.facebook.react.ReactActivity;
import org.devio.rn.splashscreen.SplashScreen;       // 添加  第二处
 
public class MainActivity extends ReactActivity {
 
    /**
     * Returns the name of the main component registered from JavaScript.
     * This is used to schedule rendering of the component.
     */
    @Override
    protected void onCreate(Bundle savedInstanceState) {      // 添加  第三处
        SplashScreen.show(this);
        super.onCreate(savedInstanceState);
    }                                                        //第三处
    @Override
    protected String getMainComponentName() {
        return "xxx";
    }
}
2、android/app/src/main/res目录中,新建layout目录,在layout目录下,创建launch_screen.xml文件,
复制以下内容( 其中 launch_screen 为启动的图片名 )

<?xml version="1.0" encoding="utf-8"?>
<LinearLayout xmlns:android="http://schemas.android.com/apk/res/android"
    android:orientation="vertical" android:layout_width="match_parent"
    android:layout_height="match_parent"
    android:background="@drawable/launch_screen">
</LinearLayout>

3、在android/app/src/main/res目录中,新建drawable-xhdpi和drawable-xxhdpi目录,在其中放入启动页图片,
命名为launch_screen.png

4、打开React-native项目的主入口文件,也就是React-native项目/App.js文件中添加,表示启动页2S后关闭,进入app主页

import SplashScreen from 'react-native-splash-screen';
export default class App extends Component<Props> {    
    componentDidMount() {                   //只需添加componentDidMount(){}就行
        setTimeout(() => {
            SplashScreen.hide();      //关闭启动屏幕
        }, 2000);
    }
	componentWillUnmount() {
    this.timer && clearTimeout(this.timer);         //清除计时器
  }
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>Welcome to React Native!</Text>
        <Text style={styles.instructions}>To get started, edit App.js</Text>
        <Text style={styles.instructions}>{instructions}</Text>
      </View>
    );
  }
}
4、生成release版本的APK:
现在可以生成签名版的APK 了:进入项目的根目录Android中运行如下代码:
gradlew assembleRelease
或./gradlew assembleRelease
签名打包成功后你会在 “android/app/build/outputs/apk/”目录下看到签名成功后的app-release.apk文件。
提示:如果你需要对apk进行混淆打包 编辑android/app/build.gradle:

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

注意:如果之前打包过此项目,在此次打包过程出现报错,请删除android/app文件下的build目录,然后重新打包

发表评论

电子邮件地址不会被公开。 必填项已用*标注