我算是從安裝到打包完成了一個 React Native 項目

因爲本身沒有接觸過移動端開發，因此選用了 React Native，畢竟任何可使用 JavaScript 來實現的應用都最終都會使用 JavaScript 實現 😄，因爲本身沒有 Mac 開發者帳號，因此只打包了安卓端

安裝環境

React Native 安裝環境的謎之複雜可能讓你還沒開始就要放棄

環境安裝必定要按照官方文檔的流程一步步來，切記！切記！切記！

Windows 平臺

若是使用 window 做爲開發環境，咱們只能開發 Android 應用。
必要的依賴：

• Node 須要 v12 版本以上
• JDK 必須是 1.8 版本或者 8 版本
• Android Studio

Android 環境

• 下載 Android Studio，安裝界面 Custom 確認選中下列項：

  • Android SDK
  • Android SDK Platform
  • Performance (Intel ® HAXM) (AMD 處理器看這裏)
  • Android Virtual Device
• Android SDK：可在歡迎界面找到 SDK Manager，安裝 android 9 (pie)

使用前的環境安裝必定要按照官方文檔來，否則後面出現各類異常讓人直接想放棄使用，安裝環境主要注意 Android Studio 的安裝。

macOS 平臺

若是使用 mac 開發，咱們能夠開發 IOS 和 Android 兩種應用。

IOS 環境

必要的依賴：

• Node 須要 v12 版本以上
• watchman 是由 Facebook 提供的監視文件系統變動的工具。安裝此工具能夠提升開發時的性能（packager 能夠快速捕捉文件的變化從而實現實時刷新）
• Xcode 能夠在 App Store 找到直接下載
• CocoaPods

注意：

• cocoapods 安裝可能須要牆工具，若是沒有牆可翻，須要多嘗試，或者在夜生人靜的時候再次嘗試，還不行能夠直聯本身的手機網絡再次嘗試，還不行的話，嘗試這篇文章的方法
• 首次運行項目時，可能須要執行 pod install

進入 ios 目錄，執行 pod install 拋出異常

這個也是因爲依賴包須要牆工具致使網絡異常，嘗試使用手機網絡後可能拋出

在項目中執行 sudo xcode-select --switch /Applications/Xcode.app 後，再次執行 pod install

以上安裝推薦使用手機網絡，若是下載異常，多試幾回，多試幾回，多試幾回，直到安裝成功

Hello World

當咱們安裝完上面一系列的環境後，若是一塊兒順利的話，咱們就能夠準備初始項目，跑起來一個 Hello World
咱們運行項目前須要打開 android 模擬器

運行項目

npx create-react-native-app rn-project

cd rn-project

yarn android

第一運行項目，編譯時間可能會比較長，若是一切順利會彈出一個 cmd 框，這個運行項目的時候是不能關閉的，它是一個 node 監聽服務。

模擬器上出現界面

恭喜你萬里長征已經走了一半了！

異常處理

異常 JAVA_HOME

啓動命令編譯時拋出異常

須要咱們找到 Android Studio 安裝目錄下 jre 目錄

設置系統變量 JAVA_HOME

對應的 PATH 路徑須要添加兩條記錄

%JAVA_HOME%\bin
%JAVA_HOME%\jre\bin

從新打開 cmd 運行成功

異常 app:installDebug

拋出異常

在 android 目錄下查看 local.properties 文件，沒有本身新建一個，指定 android sdk 安裝目錄

sdk.dir=E\:\\androidsdk

異常 Text strings must be rendered within a <Text> component

• 要刪除代碼行中的註釋
• Text 組件須要判斷值，不能爲空字符串

{province ? <Text className="province">{province}</Text> : null}

如何調試

這裏使用的開發平臺是 Window 環境

第三方模擬器

React Native 調試可使用 Android Studio 自帶的模擬器

也可使用第三方模擬器；這裏選用雷電模擬器

• 打開模擬器調試模式：應用設置 -> 關於平板電腦 -> 連續點擊 5 次版本號 -> USB 調試

• 鏈接模擬器

  • win + r 而後打開 cmd
  • adb connect 127.0.0.1:5555
  • 不一樣模擬器的端口號是不一樣的
• 在項目根目錄下運行 yarn android

若是出現 adb 不是命令，須要添加環境變量，找到 Android Studio JDK 安裝目錄下 platform-tools 目錄

調試

點擊更多 -> 搖一搖 -> debug

Chrome 調試

全部的調式均可以打開地址 http://localhost:8081/debugger-ui/ 來進行查看

真機調試

這裏指 Android 手機

• 須要打開手機 USB 調試模式，直連數據線至電腦
• 項目根目錄執行命令: yarn android

項目成功啓動後會在手機上看到啓動的程序，若是須要調試，須要搖一搖手機能夠看到彈框

選擇 Debug 利用 Chrome 調試

react-native-debugger

這個 debugger 插件很強大。
使用：

• 關閉 Chrome 瀏覽器中全部的 http://localhost:8081/debugger-ui/ 頁面（RN默認的 debugger 工具）
• 下載 react-native-debugger 應用
• Android Studio 模擬器中的 Nexus S ，由於這個模型是有菜單鍵的，高版本的模擬器一般沒有。
• 使用快捷鍵 Ctrl+M 也能夠打開菜單欄。

跨域處理

查了大半資料，建議仍是使用 nginx 作反向代理處理

動畫庫

React Native 因爲並不支持 CSS3 動畫，因此咱們實現動畫效果須要使用其內置的 Animated 庫

類型值

提供兩種類型值，其能夠綁定到樣式獲其它屬性上

• Animated.Value() 用於單個值
• Animated.ValueXY() 用於矢量值

配置動畫

Animated 提供了三種動畫類型。每種動畫類型都提供了特定的函數曲線，用於控制動畫值從初始值變化到最終值的變化過程：

• Animated.decay() 指定的初始速度開始變化，而後變化速度愈來愈慢直至停下。
• [Animated.spring()](https://reactnative.cn/docs/animated#spring) 提供了一個基礎的彈簧物理模型.
• Animated.timing() 使用 easing 函數 讓數值隨時間動起來。

大多數狀況下你應該使用 timing()。默認狀況下，它使用對稱的 easeInOut 曲線，將對象逐漸加速到全速，而後經過逐漸減速中止結束。

使用動畫

經過調用 start() 函數啓動動畫。

• start 函數能夠傳入回調函數，動畫完成時通知調用
• 正常運行完成，回調值 { finished: true }
• 調用 stop 函數結束，回調值 { finished: false }

自定義動畫組件

能夠經過 createAnimatedComponent 來封裝任意 React 組件，使其動畫化

• Animated.Image
• Animated.ScrollView
• Animated.Text
• Animated.View

Loading 動畫

實現效果

直接上代碼

import React, {useRef, useEffect} from 'react';
import {View, StyleSheet, Animated, Easing} from 'react-native';

const Loading = () => {
  let spinAnim = useRef(new Animated.Value(0));

  const loadingAnim = () => {
    Animated.timing(spinAnim.current, {
      toValue: 1,
      duration: 1500,
      easing: Easing.linear,
      useNativeDriver: true,
    }).start(({finished}) => {
      if (finished) {
        spinAnim.current.setValue(0);
        loadingAnim();
      }
    });
  };

  useEffect(() => {
    loadingAnim();
  });

  //映射 0-1 的值 映射 成 0 - 360 度
  const spin = spinAnim.current.interpolate({
    inputRange: [0, 1], //輸入值
    outputRange: ['0deg', '360deg'], //輸出值
  });

  return (
    <View style={Styles.loading}>
      <View style={Styles.loader}>
        <Animated.View
          style={[
            Styles.loaderBall,
            {
              transform: [{rotate: spin}],
            },
          ]}>
          <View style={Styles.loaderBallHook} />
        </Animated.View>
      </View>
    </View>
  );
};

const Styles = StyleSheet.create({
  loading: {
    width: '100%',
    height: '70%',
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
  },
  loader: {
    display: 'flex',
    justifyContent: 'center',
    alignItems: 'center',
    height: 35,
    width: 35,
    borderRadius: 35,
    backgroundColor: '#FE9727',
  },
  loaderBall: {
    position: 'relative',
    height: 30,
    width: 30,
    borderRadius: 30,
    // animation: spin 2s ease infinite,
  },
  loaderBallHook: {
    position: 'absolute',
    zIndex: 1,
    left: 5,
    top: 5,
    height: 7,
    width: 7,
    backgroundColor: '#fff',
    borderRadius: 7,
  },
});

export default Loading;

打包發佈

打包 APK

Android 打包參考 官方網站流程

生成簽名證書

Android Studio 生成

能夠按照谷歌文檔對應生成便可。這裏要注意的是可能有些 Android Studio 沒有 Generate signed apk 這個選項，這裏須要咱們點擊 File ->選擇如圖 Sync Project with Gradle Files 選項

而後能夠在 Build 項看到 Generate signed apk

命令生成

除了使用 Android Studio 自動生成證書，也能夠執行命令來生成證書

keytool -genkey -v -keystore myApp.keystore -alias myApp.keystore -keyalg RSA -validity 30000

參數含義

參數	含義
keytool	工具名稱（固定寫法）
)-genkey	執行的是生成數字證書操做（固定寫法）
-v	打印生成證書的詳細信息
-keystore myApp.keystore	生成的證書的文件名爲"myApp.keystore"(根據需求，設置你的證書名)
alias myApp.keystore	證書的別名爲"myApp.keystore"。
(通常和上面的文件名相同，能夠不一樣，但要記好，簽名時會用(A))
-keyalg RSA	生成密鑰文件採用的算法爲RSA(固定寫法)
-validity 3000	該數字證書的有效期爲30000天，30000天以後該證書將失效

按照提示一步步執行便可

最後生成了密鑰證書

設置gradle變量

• 把生成的證書複製到項目 /android/app/ 目錄下
• 編輯項目中的 gradle.properties 文件

MYAPP_RELEASE_STORE_FILE=myApp.keystore
MYAPP_RELEASE_KEY_ALIAS=myApp.keystore
MYAPP_RELEASE_STORE_PASSWORD=123456
MYAPP_RELEASE_KEY_PASSWORD=123456

添加簽名配置

修改 android/app/build.gradle

signingConfigs {
        ...
        release {
            storeFile file(MYAPP_RELEASE_STORE_FILE)
            storePassword MYAPP_RELEASE_STORE_PASSWORD
            keyAlias MYAPP_RELEASE_KEY_ALIAS
            keyPassword MYAPP_RELEASE_KEY_PASSWORD
        }
    }
    buildTypes {
        debug {
            signingConfig signingConfigs.debug
        }
        release {
            signingConfig signingConfigs.release
              ...
        }
    }

修改應用名稱

修改 /android/app/src/main/res/values/strings.xml 文件

<resources>
    <string name="app_name">應用名稱</string>
</resources>

修改應用 Icon

將下列目錄下的圖標替換成須要的 Icon 便可，推薦使用 Android Studio 自帶的 image-asset-studio 工具

簽名打包

進入 /android 根目錄執行命令 ./gradlew assembleRelease

成功後能夠在 /android/app/build/outputs/apk 目錄下找到打包後的 apk 文件

能夠手動安裝至安卓真機

異常處理

• 出現 Error: Cannot create directory ..\mergeDebugResources\merged.dir\values

執行命令

cd android
./gradlew clean
cd .. 
yarn android

總結

總的來講，開發仍是很適應，不過前面的環境安裝是實在有點勸退啊😄，歡迎你們下載安卓端試試