React Native 创建app套壳H5用 React native 创建一个套壳H5 安卓端App教程。记录一下完

业务场景：需要一个安卓app，套壳项目开发的H5的页面

实现思路：

搭建 React Native 开发环境

React Native 环境搭建官网地址，这里的步骤跟官网上有些不同。

安装node

安装 React Native 脚手架

npm uninstall -g react-native-cli @react-native-community/cli

创建 React Native 项目

npx react-native init AwesomeProject

查看创建项目中 gradle 的版本

再根据 gradle 的版本去下载对应的 java 版本

Gradle版本与Java版本的对应关系

Gradle 版本清单

Java 历代版本

我新建的项目实际上是gradle 7.5 的版本，我改成7.3.3，然后安装的java 版本为17

这里一定要对应上，不然运行项目跟打包项目会一堆框架兼容性问题！！

根据 React Native 的官网文档安装 Android Studio，依次执行下列操作

安装 Android Studio
安装 Android SDK
配置 ANDROID_SDK_ROOT 环境变量 把一些工具目录添加到环境变量 Path 利用 Android Studio 创建 Android 模拟器
（这里涉及到模拟器的配置，仔细查阅官网文档例子，按需配置）

运行安卓模拟器后再运行 React Native 项目

修改App.js，创建WebView，链接H5页面

安装依赖 react-native-webview

yarn add react-native-webview

可能遇到的业务问题之H5链接跳转，跳出App应用场景

在链接的H5页面中,可能存在window.open 这种标签页打开新页面的场景。

当代码使用window.open 这个方法，会唤醒手机中的浏览器去执行这个操作（原则上是离开了该App场景），如果不想离开App场景，则在链接的H5页面调用前window.open前判断一下当前环境是否为安卓端，然后改用window.location.href 的形式完成页面跳转

// 判断当前环境是否为安卓端
const u = navigator.userAgent
const inAndroid = /Android/i.test(u)

附上 App.js 源码

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 *
 * @format
 * @flow strict-local
 */

import React, {useRef} from 'react';
import type {Node} from 'react';
import {BackHandler, StatusBar} from 'react-native';
import {WebView} from 'react-native-webview';
/* $FlowFixMe[missing-local-annot] The type annotation(s) required by Flow's
 * LTI update could not be added via codemod */

const App: () => Node = () => {
  let state = {
    backButtonEnabled: true,
  };

  const onNavigationStateChange = navState => {
    if (
      navState.url.indexOf('#/home') >= 0 ||
      navState.url.indexOf('#/login') >= 0
    ) {
      state.backButtonEnabled = false;
    } else {
      state.backButtonEnabled = navState.canGoBack;
    }
  };
  const webViewRef = useRef(null);

  /**
   * 监听 安卓手机物理返回键事件
   * 这里的setTimeout  可以修改为 react 的dom加载完毕的生命周期
   */
  setTimeout(() => {
    BackHandler.addEventListener('hardwareBackPress', () => {
      // webview 后退
      if (state.backButtonEnabled) {
        webViewRef.current.goBack();
        return true;
      }
      // 退出app
      BackHandler.exitApp();
      return false;
    });
  }, 3000);
  return (
    <>
      <StatusBar hidden={true} />
      <WebView
        ref={webViewRef}
        source={{
          uri: '嵌套的H5地址',
        }}
        onNavigationStateChange={onNavigationStateChange}
      />
    </>
  );
};

export default App;

React Native 打包

React Native 官网教程

对着官网文档完成下列操作

1、生成一个签名秘钥
2、设置gradle
3、把签名配置加入到项目的gradle配置中
4、生成发行APK包
发包可能会涉及到应用的图标、名称等配置信息的修改
react native 设置App名称和图标

React Native 创建app套壳H5