ReactNative环境搭建

安装要求

安装步骤请参考官网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中需要固定版本

运行步骤

通用

1. yarn install

Android

1. npm run start
2. npm run android

iOS

1. cd ios && pod install
2. npm run build:ios
3. npm run ios

调试

1. 选中iOS模拟器，按快捷键command + D打开调试窗口，选择Debug可以打开chrome debugger-ui。

手动打包

目前为本地环境打包，希望后面集成自动化打包/部署

Android

1. npm run bundle-android
2. cd android && ./gradlew assembleDebug
3. cd android && ./gradlew assembleRelease

Android

1. 待补充

参考链接:

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

1. 原因：libwebp的地址不可用
2. 解决方案：修改本地cocopods的Spec仓库
3. 注意：修改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

1. 原因：yarn add (/npm i) react-native-fast-image && npx pod-install后，因react-native-fast-image的不明bug使得link不彻底 or Xcode bug, 导致Xcode无法找到RNFastImage这个库
2. 解决：Xcode->Build Settings->Library Search Paths里，对Debug和Release的列表增加Link路径 “${PODS_CONFIGURATION_BUILD_DIR}/RNFastImage”
3. 注意：对Debug和Release的列表里都要增加路径，否则会给打release包的人留坑了。