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

react-native練手（android版）