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

[felix-cao]

本文主要介绍使用 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

• Expo 官网
• Expo & "Create React Native App"
• Announcing Expo Dev Tools (beta) 2018-7-27
• Snack — A Playground for React Native 2017-5-15

[felix-cao]

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]

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

结合下面两个地址解决：

• Latest react-native app doesn't work ":CFBundleIdentifier", Does Not Exist facebook/react-native#7308
• https://www.jianshu.com/p/c7e8b8fcdbcc

[felix-cao]

清缓存

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

参考 facebook/react-native#4968

[felix-cao]

打离线包

此 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]

Android 包名和签名

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

[felix-cao]

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]

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'

解决办法：
facebook/react-native#20492 (comment)

[felix-cao]

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]

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]

duplicate symbol OBJC_CLASS$_ XXX

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

[zhigeha]

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