ReactNative 問題 - fantasy0107/notes GitHub Wiki

// 在實機上開啟開發者列表
adb shell input keyevent 82 

專案架構目錄

  1. android - android 原生專案程式碼
  2. ios - ios 原生專案程式碼
  3. index.js - 專案的進入點
  4. package.ks - 預先載入依賴性

開發功能選單

模擬器除錯

iOS -  cmd + d 
android - cmd + m 

功能

  1. Live Reload -> 有更改自動Reload
  2. Hot Reloading -> App不重新載入,直接更新View
  3. Start Systrace => 效能分析工具
  4. Toggle Inspector => 選擇畫面元件,顯示出該元件的style
  5. Show Perf Monitor => 顯示UI效能

Directory Structure

  1. actions - 動作 - api, dispatch
  2. componenets - 元件
  3. images - 圖檔
  4. reducers - redux 用
  5. screens - 載入 component 整合成 一個畫面
  6. router.js - stack + 畫面一層一層疊上去 + 有順序

工具

  1. reactron - 辨識你的 react JS 和 react-native 專案

其它

react-native 線上試玩
react native 中文文件

開發 OS

mac os => ios + android windows => android

提醒

  1. 過舊的系統不支援
    1. android >= 4.1(api 16)
    2. ios >= 8.0
  2. 不會原生開發的話, 就必須依賴官方或第三方套件支援
  3. android 上目前樣式效果支援程度還差一些

問題

可能的卡頓狀況

圖片太大張 解析度太大 => 解法修正 圖片大小

com.android.ddmlib.InstallException: INSTALL_FAILED_DEXOPT

移除 app 重新安裝

adb uninstall 'app_name' 

// app_name 在 android -> app -> build.gradle
//跑特定版本的 ios simulator 
react-native run-ios --simulator="iPhone 5s"
react-native run-ios --simulator="iPhone 6"
react-native run-ios --simulator="iPhone 6 Plus"

//列出所有 ios simulator
xcrun simctl list devices

android studio 上的模擬器出現 googl play store

Your Virtual Devices 在 play store 的部分必須要有 '圖案'

//新建立
1. create virtual device 
2. 選擇 play store 有圖案的 (ex: Nexus 5X)
3. 選擇 system image -> target 欄位有 google play 字樣的image 
(ex: recommended ore/26/x86/android 8.0(google play) )

xcode 路徑
Product -> Libraries -> React.xodeproj -> React -> Base -> RCTDefines.h
Adding RCT_DEV=0 to the preprocessor macros did fix the shaking gesture.

React native 特定平台客製化 - 特定平台檔案命名

component.ios.js
component.android.js

//使用方式 - 不指定副檔名 - 這樣會去自動載入該平台(ios/android)檔案
import component from './component'

此版本不符合 Google Play 的 64 位元版本規定
下列適用於 64 位元裝置的 APK 或應用程式套件只有 32 位元的原生程式碼:2019050701。
自 2019年8月1日起,所有版本都必須符合 Google Play 的 64 位元版本規定。

android -> app -> build.gradle -> 

defaultConfig {
   ndk {
       abiFilters "armeabi-v7a", "x86" ,"x86_64" //加這個
   }
}

android

要可以跑 File -> sync project with gradle file path : View -> tool windows -> profiler

追蹤 leak => Android Studio Profiler Android Studio Profiler

ios

https://medium.freecodecamp.org/finding-memory-leaks-react-native-app-ios-46e6eeb50c8c

追蹤 leak

XCode → Product → Profile (⌘ + i)
按下紅點開始追蹤

Alt text

常見的導致 memory leak 問題

https://blog.swmansion.com/hunting-js-memory-leaks-in-react-native-apps-bd73807d0fde

  1. Unreleased timers/listeners added in componentDidMount

解法: compnentWillUnmount 釋放

  1. Closure scope leaks

使用 FormData 時必須要用自己的 物件格式

stackoverflow 解法
FormData 原始碼

FormData.append(key, value);
當value 是物件時會做額外的處理 必須要有 uri , type, name  數字或文字不會

var example = {
    uri: uriFromCameraRoll,
    type: 'image/jpeg',
    name: 'photo.jpg',
};

所以當要處理自己的物件時 先轉成 json string 在後端轉回來再做處理

傳多個檔案陣列要以 file[] 為key且為結尾 的名稱 ex: 
FormData.append('file[]', example); // 標準
FormData.append('xxxxxfile[]', example); //自定義

support / androidx

Android Material and appcompat Manifest merger failed
Androidx和Android support库共存问题解决

/* Child.js */
import React from 'react'
import withStyles from 'isomorphic-style-loader/lib/withStyles'
import s from './Child.css'

class Child extends React.Component {
  componentDidMount() {
    this.props.onRef(this)
  }
  componentWillUnmount() {
    this.props.onRef(undefined)
  }
  method() {
    window.alert('do stuff')
  }
  render() {
    return <h1 className={s.root}>Hello World!</h1>
  }
}

export default withStyles(s)(Child);
/* Parent.js */
import React from 'react'
import Child from './Child'

class Parent extends React.Component {
  onClick = () => {
    this.child.method() // do stuff
  }
  render() {
    return (
      <div>
        <Child onRef={ref => (this.child = ref)} />
        <button onClick={this.onClick}>Child.method()</button>
      </div>
    );
  }
}

自己寫的 component 並且可以包覆別的 component

// 自己寫的 component

class selfComponent extends Component {
   render() {
       const {children} = this.props; // children  
   }
}

// 在其他地方使用

<selfComponent>
 ... // 這邊的 ... 會是 selfComponent 裡的 props children
</selfComponent>

實機上測試

release version

// android
adb uninstall 'app.full.name';
cd android && ./gradlew installRelease&&cd ..


// ios
xcode ->   
Project[上方工具列] ->    
Scheme -> Edit Scheme -> Run[左邊選項] -> Info -> Build Configuration [Debug/Release(可以拔線)]  
⚠️ **GitHub.com Fallback** ⚠️