1.環境搭建
1)一步步按 https://reactnative.cn/docs/getting-started.html 操作
2)brew install watchman
3)https://www.oracle.com/technetwork/java/javase/downloads/jdk8-downloads-2133151.html 下載並安裝 jdk 8,javac -version 看安裝成功與否
4)https://developer.android.com/studio/index.html 下載並安裝Android Studio 3,配置 ANDROID_HOME 環境變量。。。
google站點訪問比較慢,要用 ping ip 查最快的IP是多少,再配置hosts 如 203.208.41.67 dl.google.com
建議Android5的sdk以上都安裝
5)react-native init AB
用Android Studio打開項目,連上手機,運行
運行時如果報錯 Cause: aidl is missing from /Android/sdk/build-tools/27.0.3/aidl...
按下面的去修改sdk版本和build工具版本
import React, {Component} from 'react'; import {Platform, StyleSheet, Text, View, WebView, BackHandler} from 'react-native'; const instructions = Platform.select({ ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu', android: 'Double tap R on your keyboard to reload,\n' + 'Shake or press menu button for dev menu', }); type Props = {}; export default class App extends Component<Props> { onNavigationStateChange = navState => { this.setState({ backButtonEnabled: navState.canGoBack }); }; // //自定義返回事件 // _goBackPage = () => { // // 官網中描述:backButtonEnabled: false,表示webView中沒有返回事件,爲true則表示該webView有回退事件 // if (this.state.backButtonEnabled) { // this.refs['webView'].goBack(); // } else {//否則返回到上一個頁面 // this.nav.goBack(); // } // }; // 監聽原生返回鍵事件 componentDidMount() { if (Platform.OS === 'android') { BackHandler.addEventListener('hardwareBackPress', this.onBackAndroid); } } onBackAndroid = () => { // 官網中描述:backButtonEnabled: false,表示webView中沒有返回事件,爲true則表示該webView有回退事件 if (this.state.backButtonEnabled) { this.refs['webView'].goBack(); return true; } else { if (this.lastBackPressed && this.lastBackPressed + 2000 >= Date.now()) { //最近2秒內按過back鍵,可以退出應用。 return false; } this.lastBackPressed = Date.now(); ToastAndroid.show('再按一次退出應用', ToastAndroid.SHORT); return true; } }; render() { return ( <WebView /* 兩種加載方式 * 加載網頁 source:{{uri: '網址'}} * 加載本地靜態頁面 source:{{html: '靜態頁面代碼段'}} */ // source={{html: '<h1>這是加載的代碼段</h1>'}} // source={{uri: 'http://www.baidu.com'}} source={ {uri: 'file:///android_asset/cnode/index.html'} } //加載狀態顯示 startInLoadingState={true} //存儲 IOS是默認支持的 domStorageEnabled={true} //是否支持javascript javaScriptEnabled={true} ref="webView" onNavigationStateChange={this.onNavigationStateChange} /> ); } } const styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#F5FCFF', }, welcome: { fontSize: 20, textAlign: 'center', margin: 10, }, instructions: { textAlign: 'center', color: '#333333', marginBottom: 5, }, });
2.打包項目
1)一步步按 https://blog.csdn.net/weixin_38706214/article/details/78250525 博客的 ‘命令行發佈版本’ 操作
2)mkdir -p android/app/src/main/assets
3)運行 react-native run-android
瀏覽器打開 http://localhost:8081/index.delta?platform=android&dev=true&minify=false 拷貝出頁面內容複製保存爲index.android.bundle文件
具體目錄路徑爲 /android/app/src/main/assets/index.android.bundle
4)到 /android 目錄下
運行 ./gradlew assembleRelease
5)生成的apk包在 /android/app/build/outputs/apk/release/app-release.apk
參考:
https://reactnative.cn/docs/getting-started.html
https://blog.csdn.net/weixin_38706214/article/details/78250525
https://www.aliyun.com/jiaocheng/357361.html
https://www.aliyun.com/jiaocheng/359202.html