felix-cao commented 6 years ago

本文主要介绍使用 Expo 工具构建 APP 开发环境，目前 React Native 的官方文档中明确使用 Expo 工具。

一、Expo 简介

从 Expo 官网的英文描述，我们知道

Expo 是用于开发和构建 React Native 应用的一个免费开源的工具集，可以帮助您使用 JavaScript 和 React 开发原生的 IOS 和 Android 项目。

使用 JavaScript 和 React 开发原生的 IOS 和 Android 项目, 是 React Native 干的事，所以上面那句话的直白点讲：Expo 是个辅助工具，用来帮助进行 React Native APP 开发。

Expo 主要给我们提供四种工具

snack Expo 类似于 Codepen 和 JSFiddle.

一直从事 React Native 的朋友们会发现在 React Native 的官方文档中，在构建工具的选择也经过了很多版本的进化：

react-native-cli， React Native 自己的开发的命令行工具，使用 react-native init projectName 来初始化一个项目
create-react-native-app，简称 CRNA, 是 Facebook 与 Expo 联合开发的，在2017年3月13日被发布出来
expo-cli，但是 React Native 0.57 版本之后，官方就在其 Document 中推荐使用 expo-cli 了，主要是因为 Expo 的优秀开发体验。

二、安装

2.1、安装 Xcode 和 Android Studio

此处不是本文的重点，就不浪费篇幅了。

2.2、安装 Node.js

利用 nvm 安装 Node.js, 可阅读 nvm 在 github 中的 Repo

$ curl -o- https://raw.githubusercontent.com/creationix/nvm/v0.33.11/install.sh | bash

接着执行

export NVM_DIR="$HOME/.nvm"
[ -s "$NVM_DIR/nvm.sh" ] && \. "$NVM_DIR/nvm.sh" # This loads nvm

安装 Node.js

$ nvm install node

2.3、安装 Expo 命令行工具

$ npm install -g expo-cli

或使用 yarn：

$ yarn global add expo-cli

三、构建 React Native APP

$ expo init just-eat

启动

$ cd just-eat
$ yarn start

这个时候会自动启动浏览器打开 Expo Developer Tools，简称Dev Tools

点击 Run on iOS simulator, 即可在 iOS 模拟器中运行 React Native APP

Reference

felix-cao commented 5 years ago

App 版本过期

这个 case 是使用了 expo 打开 Dev Tools, 时，点击在模拟器中运行时，有时候可能遇到下面的错误提示：

This version of the Expo app is out of date. Uninstall the app and run again to upgrade

意思是在 Simulator 模拟器里安装的 Expo App 需要升级

解决办法

把模拟器中的 Expo 卸载，然后按下面的步骤解决

iOS 模拟器，yarn start 后自动在浏览器中打开 Dev tools 中点击 Run on iOS Simulator，需要注意的是，我们没办法在iOS模拟器中手动下载 Expo的。
如果是 Android 真机或模拟器，yarn start 后自动在浏览器中打开 Dev tools 中点击 Run on Android device/emulator，或者直接去 expo tools 下载。

felix-cao commented 5 years ago

'config.h' file not found / ":CFBundleIdentifier", Does Not Exist

结合下面两个地址解决：

felix-cao commented 5 years ago

清缓存

watchman watch-del-all && rm -rf $TMPDIR/react-native-packager-cache- && rm -rf $TMPDIR/metro-bundler-cache- && rm -rf node_modules/ && npm cache clean --force && npm install && npm start -- --reset-cache

参考 https://github.com/facebook/react-native/issues/4968

felix-cao commented 5 years ago

打离线包

此 case 是在没有使用 expo 的情况下，使用 react-native 命令行工具进行离线包打包

Android

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

iOS

react-native bundle --entry-file ./index.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false

felix-cao commented 5 years ago

Android 包名和签名

包名在： Android/app/src/main/AndroidMainifest.xml
签名：https://segmentfault.com/a/1190000013043964

felix-cao commented 5 years ago

Android 下真机测试

此 Case 是在没有使用 expo 的情况下，如何进行真机测试

/android/app/build，先将这个文件夹里的四个子文件删除

执行 js 打包命令

react-native bundle --platform android --dev false --entry-file index.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/main/res/

npm run android
```
react-native run-android
```
将 /android/app/build/outputs/apk/debug/app-debug.apk 发送到手机

felix-cao commented 5 years ago

iOS 打包提示关键词 libyoga.a

此 case 是在没有使用 expo 情况下进行 Archive 时出现的。
提示完整信息：

Target 'yoga' has a command with output '/Users/dev-imac/Library/Developer/Xcode/DerivedData/smart_jishou-asuyndnulcjwvdcabqqhnlsqttao/Build/Intermediates.noindex/ArchiveIntermediates/smart_jishou/IntermediateBuildFilesPath/UninstalledProducts/iphoneos/libyoga.a'

解决办法： https://github.com/facebook/react-native/issues/20492#issuecomment-409599358

felix-cao commented 5 years ago

iOS下真机调试

1、先打离线包

react-native bundle --entry-file ./index.js --bundle-output ./ios/bundle/index.ios.jsbundle --platform ios --assets-dest ./ios/bundle --dev false

2、添加依赖

右键点项目名 ->Add Files to "..."

将 ios/bundle 文件夹以 Create groups 的形式创建依赖

将 ios/bundle/assets 文件夹以 Create folder references 的形式创建依赖

现在可以在真机上跑了。

felix-cao commented 5 years ago

iOS Archive

Product -> Archive

错误1

百度地图SDK Archive时报下面错误：

ld: warning: directory not found for option '-L/Users/dev-imac/Library/Developer/Xcode/DerivedData/smart_jishou-asuyndnulcjwvdcabqqhnlsqttao/Build/Intermediates.noindex/ArchiveIntermediates/smart_jishou/BuildProductsPath/Release-iphoneos/React'
ld: bitcode bundle could not be generated because '/Users/dev-imac/work/smart_jishou/ios/Pods/BaiduMapKit/BaiduMapKit/BaiduMapAPI_Base.framework/BaiduMapAPI_Base(BMSDKKeychainItemWrapper.o)' was built without full bitcode. All object files and libraries for bitcode must be generated from Xcode Archive or Install build file '/Users/dev-imac/work/smart_jishou/ios/Pods/BaiduMapKit/BaiduMapKit/BaiduMapAPI_Base.framework/BaiduMapAPI_Base' for architecture armv7
clang: error: linker command failed with exit code 1 (use -v to see invocation)

解决方案参考：https://www.jianshu.com/p/96c252d761b9

felix-cao commented 5 years ago

duplicate symbol _OBJCCLASS$_ XXX

某个依赖被引用了两次删除即可亦可参考：https://www.jianshu.com/p/c1a1e9f273c9

zhigeha commented 5 years ago

你好，大佬。有个问题非常疑惑，可否请教一下。由于公司项目的技术选型和需求原因，做react native 项目开发时候，结合expo 工具进行开发，然后使用expo工具是没办法在android 跟ios等文件夹自定义配置原生权限的功能。现在项目需求需要增加，第三方登录（qq，微信，微博），推送，分享等功能。请问，如何解决？

felix-cao / Blog

React Native入门 --- Expo 构建 React Native APP #2

一、Expo 简介

二、安装

2.1、安装 Xcode 和 Android Studio

2.2、安装 Node.js

2.3、安装 Expo 命令行工具

三、构建 React Native APP

Reference

App 版本过期

解决办法

'config.h' file not found / ":CFBundleIdentifier", Does Not Exist

清缓存

打离线包

Android 包名和签名

Android 下真机测试

iOS 打包提示关键词 libyoga.a

iOS下真机调试

1、先打离线包

2、添加依赖

iOS Archive

错误1

duplicate symbol _OBJCCLASS$_ XXX

felix-cao / Blog

React Native入门 --- Expo 构建 React Native APP #2

一、Expo 简介

二、安装

2.1、安装 Xcode 和 Android Studio

2.2、安装 Node.js

2.3、安装 Expo 命令行工具

三、构建 React Native APP

Reference

App 版本过期

解决办法

'config.h' file not found / ":CFBundleIdentifier", Does Not Exist

清缓存

打离线包

Android 包名和签名

Android 下真机测试

iOS 打包提示关键词 libyoga.a

iOS下真机调试

1、 先打离线包

2、添加依赖

iOS Archive

错误1

duplicate symbol _OBJCCLASS$_ XXX

1、先打离线包