How To Creat A React Native Android Web APP From Scratch?

Yanwei Liu

·

Follow

5 min read

·

Jun 30, 2019

--

Share

本APP已知問題：無法使用實體按鍵回到上一頁

初始化環境

Getting StartedReact Native 跨平台APP開發學習筆記(一)：環境配置

安裝react-native

//如果之前安裝過react-native，則可跳過
開啟CMD後，執行：
npm install -g react-native-cli

建立新專案

react-native init WebProject
cd WebProject

開啟Android模擬器

開啟Android Studio->Configure->AVD Manager->Launch

執行APP

react-native run-android
此時會在Android模擬器中跳出APP執行畫面

選擇Reload進行更新
點擊Enable Live Reload，當修改程式碼時，會自動更新APP畫面

修改目錄中的App.js

import React, { Component } from 'react';import { StyleSheet, WebView, Platform} from 'react-native';export default class MainActivity extends Component {render() {return (<WebView
          style={styles.WebViewStyle}
          source={{uri: 'https://books.com.tw'}}
          javaScriptEnabled={true}
          domStorageEnabled={true}  />);
      }
    }const styles = StyleSheet.create(
{WebViewStyle:
 {
    justifyContent: 'center',
    alignItems: 'center',
    flex:1,
    marginTop: (Platform.OS) === 'ios' ? 20 : 0
 }
});

產生APK

參考以下網站：React Native App設置&Android版發佈如果上面的連結失效：Evernote備份保存
--------------------------------------------------------------------//註1，產生APK指令如下，請在App Project根目錄下執行
cd android && gradlew assembleRelease//註2，成功後，編譯完的APK在以下目錄
PathToProject\android\app\build\outputs\apk\debug//註3，Proguard優化前後檔案大小比較
未優化APK大小為30.2MB
優化後APK大小為26.7MB//註4，在實體手機安裝時，請允許安裝非Play商店的APP