用React Native将论坛打包成App

Apk下载地址：com.shuzijumin.app_1.0.0_1.apk

• 创建expo项目：https://docs.expo.dev/guides/typ ... typescript-template
  
  1. yarn create expo-app project-name --template expo-template-blank-typescript

  复制代码
  
  
• 安装webview扩展：https://docs.expo.dev/versions/latest/sdk/webview/
  
  1. npx expo install react-native-webview

  复制代码
  
  
• 编辑App.ts文件
  
  1. import { useEffect, useRef } from 'react'
     
  2. import { WebView } from 'react-native-webview'
     
  3. import { BackHandler, StatusBar, SafeAreaView } from 'react-native'
     
  4. 
     
  5. export default function App() {
     
  6.   const webViewRef = useRef(null)
     
  7.   useEffect(() => {
     
  8.     const backHandler = BackHandler.addEventListener(
     
  9.       'hardwareBackPress',
     
  10.       () => {
      
  11.         if (webViewRef.current) {
      
  12.           (webViewRef.current as any).goBack()
      
  13.           return true
      
  14.         }
      
  15.         return false
      
  16.       }
      
  17.     )
      
  18.     return () => backHandler.remove()
      
  19.   }, [])
      
  20.   return (
      
  21.     <>
      
  22.       <StatusBar barStyle='light-content' />
      
  23.       <SafeAreaView style={{ flex:0, backgroundColor: '#000000' }} />
      
  24.       <SafeAreaView style={{ flex:1, backgroundColor: '#000000' }}>
      
  25.         <WebView
      
  26.           ref={webViewRef}
      
  27.           source={{ uri: 'https://shuzijumin.com' }}
      
  28.           allowsBackForwardNavigationGestures
      
  29.         />
      
  30.       </SafeAreaView>
      
  31.     </>
      
  32.   )
      
  33. }

  复制代码
  
  
• 编译apk：https://docs.expo.dev/build-reference/apk/