安裝要求
安裝步驟請參考官網getting-start（不懂的要學-，-）
- Node - v14.5.0
- Npm - v6.14.5
- JDK - v1.8
- CocoaPods - v1.9.3
- Xcode - v11.3.1
- Watchman - v4.9.0
- Yarn
- Android Studio - 6.14.5
- ios私有倉庫 - @主管開通倉庫權限
命令
通用命令
| 原始命令 | 快捷命令 | 描述 |
|---|---|---|
npx react-native start | npm run start | 啟動metro |
| - | npm run lint | 代碼格式檢測 |
react-devtools | - | 打開桌面版devtools查看Component布局 |
iOS命令
| 原始命令 | 快捷命令 | 描述 |
|---|---|---|
npx react-native run-ios | npm run ios | build&run |
npx react-native log-ios | - | 打開log |
組合鍵command + D | - | 打開虛擬機的DEV選單 |
| - | 用力搖晃手機 | 打開真機的DEV選單 |
| - | npm run bundle-ios | jsBundle打包 |
Android命令
| 原始命令 | 快捷命令 | 描述 |
|---|---|---|
npx react-native run-android | npm run android | 啟動metro |
npx react-native log-android | - | 打開log |
組合鍵command + M | - | 打開虛擬機的DEV選單 |
adb shell input keyevent 82 | - | 打開APP的DEV選單 |
| - | npm run bundle-android | jsBundle打包 |
cd android && ./gradlew clean | - | 清除工程目錄下的build檔案夾 |
| - | 用力搖晃手機 | 打開真機的DEV選單 |
adb -s [device_num] install [apk_path] | - | 命令列安裝apk |
注意事項
- Homebrew下載時卡在Updating Homebrew的解決方案
- node包管理工具統一使用yarn，不要用npm、cnpm
- 更換yarn鏡像源
- Android開發需要科學上網
- iOS有些lib下載速度較慢，但本地環境下載一次即可，耐心等待0.0
- 安裝第三方lib時，請在package.json中固定依賴版本號，不要使用‘~’或者‘^’
- iOS：PodFile中需要固定版本
運行步驟
通用
yarn install
Android
npm run startnpm run android
iOS
cd ios && pod installnpm run build:iosnpm run ios
除錯
- 選中iOS模擬器，按快捷鍵command + D打開除錯視窗，選擇Debug可以打開chrome debugger-ui，
手動打包
目前為本地環境打包，希望后面集成自動化打包/部署
Android
npm run bundle-androidcd android && ./gradlew assembleDebugcd android && ./gradlew assembleRelease
Android
- 待補充
參考鏈接:
React Native 中文網
React Native Directory
示例指引
同學們可將自己覺得有用的知識點寫在這里供大家參考
- box-shadow 在RN中的寫法
CSS：
box-shadow:0px 2px 16px 0px rgba(0,0,0,0.08);
RN：
shadowColor:'#000000',
shadowOffset:{
width:0,
height:2
},
shadowOpacity:0.08,
shadowRadius:16,
android上外陰影用elivation
引入第三方組件，優化安卓陰影效果
import {BoxShadow} from 'react-native-shadow';
const shadowOpt = {
width: getPixel(343), //包裹的子內容多寬這里必須多寬
height: getPixel(192), //同上
color: '#000000', //陰影顏色
border: 16, //陰影寬度
radius: getPixel(16), //包裹的子元素圓角多少這里必須是多少
opacity: 0.03, //透明度 (注意：經琪琪與萌老師確認過這個效果 與藍湖給出8%的效果是幾乎一致的)
x: 0,
y: 2,
style: {marginVertical: getPixel(10)},
};
<BoxShadow setting={shadowOpt}>
</BoxShadow>
- 漸變色 react-native-linear-gradient
eg：
import LinearGradient from 'react-native-linear-gradient';
<LinearGradient colors={['rgba(0, 0, 0, 0)', 'rgba(0, 0, 0, .5)']} style={styles.container}>
<Text> 這里是漸變色 </Text>
</LinearGradient>
- pod install時出現 Error installing libwebp
- 原因：libwebp的地址不可用
- 解決方案：修改本地cocopods的Spec倉庫
- 注意：修改CDN倉庫（trunk）的Spec即可 一般是/Users/yourname/.cocoapods/repos/trunk/Specs/1/9/2/libwebp/1.1.0/
- Xcode build/run/archive時出現 ld: library not found
eg：ld: library not found for -lRNFastImage
- 原因：yarn add (/npm i) react-native-fast-image && npx pod-install后，因react-native-fast-image的不明bug使得link不徹底 or Xcode bug, 導致Xcode無法找到RNFastImage這個庫
- 解決：Xcode->Build Settings->Library Search Paths里，對Debug和Release的串列增加Link路徑 “${PODS_CONFIGURATION_BUILD_DIR}/RNFastImage”
- 注意：對Debug和Release的串列里都要增加路徑，否則會給打release包的人留坑了，
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/208833.html
標籤：其他
下一篇：碎片實踐-新聞應用