如何使用React Native建立一個Android版本的Web APP

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

本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執行畫面
點擊Ctrl+M進入上圖畫面
選擇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
}
});

Machine Learning | Deep Learning | https://linktr.ee/yanwei

Machine Learning | Deep Learning | https://linktr.ee/yanwei