ReactNative 問題 - fantasy0107/notes GitHub Wiki
// 在實機上開啟開發者列表
adb shell input keyevent 82
- android - android 原生專案程式碼
- ios - ios 原生專案程式碼
- index.js - 專案的進入點
- package.ks - 預先載入依賴性
iOS - cmd + d
android - cmd + m
- Live Reload -> 有更改自動Reload
- Hot Reloading -> App不重新載入,直接更新View
- Start Systrace => 效能分析工具
- Toggle Inspector => 選擇畫面元件,顯示出該元件的style
- Show Perf Monitor => 顯示UI效能
- actions - 動作 - api, dispatch
- componenets - 元件
- images - 圖檔
- reducers - redux 用
- screens - 載入 component 整合成 一個畫面
- router.js - stack + 畫面一層一層疊上去 + 有順序
- reactron - 辨識你的 react JS 和 react-native 專案
react-native 線上試玩
react native 中文文件
mac os => ios + android windows => android
- 過舊的系統不支援
- android >= 4.1(api 16)
- ios >= 8.0
- 不會原生開發的話, 就必須依賴官方或第三方套件支援
- android 上目前樣式效果支援程度還差一些
圖片太大張 解析度太大 => 解法修正 圖片大小
移除 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
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.
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" //加這個
}
}
要可以跑 File -> sync project with gradle file path : View -> tool windows -> profiler
追蹤 leak => Android Studio Profiler
https://medium.freecodecamp.org/finding-memory-leaks-react-native-app-ios-46e6eeb50c8c
XCode → Product → Profile (⌘ + i)
按下紅點開始追蹤
https://blog.swmansion.com/hunting-js-memory-leaks-in-react-native-apps-bd73807d0fde
- Unreleased timers/listeners added in componentDidMount
解法: compnentWillUnmount 釋放
- Closure scope leaks
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); //自定義
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
class selfComponent extends Component {
render() {
const {children} = this.props; // children
}
}
// 在其他地方使用
<selfComponent>
... // 這邊的 ... 會是 selfComponent 裡的 props children
</selfComponent>
// android
adb uninstall 'app.full.name';
cd android && ./gradlew installRelease&&cd ..
// ios
xcode ->
Project[上方工具列] ->
Scheme -> Edit Scheme -> Run[左邊選項] -> Info -> Build Configuration [Debug/Release(可以拔線)]