带你从零学ReactNative开发跨平台App开发（九）

悠悠 2022-03-27 06:24 234阅读 0赞

> ReactNative跨平台开发系列教程：
> 
> [带你从零学ReactNative开发跨平台App开发（一）][ReactNative_App]
> 
> [带你从零学ReactNative开发跨平台App开发（二）][ReactNative_App 1]
> 
> [带你从零学ReactNative开发跨平台App开发（三）][ReactNative_App 2]
> 
> [带你从零学ReactNative开发跨平台App开发（四）][ReactNative_App 3]
> 
> [带你从零学ReactNative开发跨平台App开发（五）][ReactNative_App 4]
> 
> [带你从零学ReactNative开发跨平台App开发（六）][ReactNative_App 5]
> 
> [带你从零学ReactNative开发跨平台App开发（七）][ReactNative_App 6]
> 
> [hot：更多>>][hot]
> 
> 这是reactnative系列文章第九篇，感觉没有反响，也许大家都忙着搞rn，也许是expo在国内市场不成熟，反正是我先把我自己踩过的坑分享一下，好了，废话不多说，开始撸码，你准备好了吗？
> 
> --------------------
> 
> # Detaching to ExpoKit #
> 
> 这篇主要说一下分离expo项目，到rn原生混合开发模式。这里引出了expo kit。这是一个强悍的东西，下面我简单以官方的口吻介绍一下expo kit。
> 
> expo kit是一个允许你用expo平台把你已经创建的expo项目作为更大的标准native项目一部分的objective-c和java的类库。说白了就是一个类库。当你把expo项目分离后，
> 
> 你就可以用xcode或者Androidstudio或者react-native init 打开项目。
> 
> 我们为何要把expo项目detache呢？
> 
> 因为当我们用expo创建项目后，但我们想调用native modules的时候，这在expo里是不允许的，因为expo是纯js写的，并且不会 “drop down” 到ios或者Android层，然而这也是expo的核心也是expo快速和强大使用的一部分。
> 
> 然而某些情况下，一些高级开发者，需要用到native的功能，而这些共能，超出了expo提供的范围，那么把expo项目detache，分离出来，就是一个大家通用的做法。
> 
> 分离出来的项目，可以用xcode打开，也可以用androidstudio运行，并且分离出来的项目对expo kit有依赖关系。我们分离后，也依然依赖expo sdk，也就是说，expo提供的api，我们可以用，但是expo提供的部分服务，我们将不再可以使用，这是一件很不幸的事情。
> 
> 这里官方给出了几点建议，什么情况下，你应该分离，什么情况下，你不应该分离：
> 
>     You might want to detach if:
>     Your Expo project needs a native module that Expo doesn’t currently support. We’re always expanding the Expo SDK, so we hope this is never the case. But it happens, especially if your app has very specific and uncommon native demands.
>     You should not detach if:
>     All you need is to distribute your app in the iTunes Store or Google Play. Expo can build binaries for you in that case. If you detach, we can’t automatically build for you any more.
>     You are uncomfortable writing native code. Detached apps will require you to manage Xcode and Android Studio projects.
>     You enjoy the painless React Native upgrades that come with Expo. After your app is detached, breaking changes in React Native will affect your project differently, and you may need to figure them out for your particular situation.
>     You require Expo’s push notification services. After detaching, since Expo no longer manages your push certificates, you’ll need to manage your own push notification pipeline.
>     You rely on asking for help in the Expo community. In your native Xcode and Android Studio projects, you may encounter questions which are no longer within the realm of Expo.
> 
> 好，依然创建一个新的项目，下面我们来做分离：（分离前的目录结构）
> 
> ![1106982-20171219235152256-603728128.png][]
> 
> 分离后，我们的js文件依然保存，但是他会额外的添加`ios` and `android的文件夹，并且他们都依赖于React Native and on Expo的核心SDK.。`
> 
> 下面分离，分离其实很简单，一句话
> 
> exp detach
> 
> 然而，这个过程，将会下载必要的依赖，并且创建`ios` and `android文件夹`
> 
> ![1106982-20171220000050943-1563921725.png][]
> 
> 给我报错，打脸，让我在配置文件里设置一些debug模式，过程比较慢，很尴尬！
> 
> ![1106982-20171220000730131-1977348156.png][]
> 
> 我在这里给他加 了一个debug，他提示我不应该
> 
> ![1106982-20171220000814021-1728248469.png][]
> 
> 不过最后还是提示成功了，
> 
> ![1106982-20171220001052381-1673830864.png][]
> 
> 现在在看一下我们的目录结构：
> 
> ![1106982-20171220001146756-1000884181.png][]
> 
> Android文件夹就多出来了，这里应为我没有mac环境跳过了ios文件夹，我觉得这就是赤裸裸的歧视了！！
> 
> 看我下面执行的命令：
> 
> ![1106982-20171220001430834-1137894030.png][]
> 
> react-native run-android
> 
> 说明我们的项目已经成功分离出来，没有问题很好，很强大。
> 
> --------------------
> 
> [我的github地址][github] 项目在这里找到！
> 
> 后续文章持续更新，敬请期待！
> 
> **文章为作者原创，转载请注明出处。**

[ReactNative_App]: http://www.cnblogs.com/gdsblog/p/8025092.html
[ReactNative_App 1]: http://www.cnblogs.com/gdsblog/p/8028645.html
[ReactNative_App 2]: http://www.cnblogs.com/gdsblog/p/8031095.html
[ReactNative_App 3]: http://www.cnblogs.com/gdsblog/p/8035245.html
[ReactNative_App 4]: http://www.cnblogs.com/gdsblog/p/8045264.html
[ReactNative_App 5]: http://www.cnblogs.com/gdsblog/p/8047364.html
[ReactNative_App 6]: http://www.cnblogs.com/gdsblog/p/8063739.html
[hot]: http://www.cnblogs.com/gdsblog/category/1129612.html
[1106982-20171219235152256-603728128.png]: /images/20220327/fe9726a1c4ae45859d11bcb63c96d9ef.png
[1106982-20171220000050943-1563921725.png]: /images/20220327/1d8b959bdd3a4bf58f76e07fa324eb55.png
[1106982-20171220000730131-1977348156.png]: /images/20220327/3439a2beb1cf46a2aaa28c0f9ae6155d.png
[1106982-20171220000814021-1728248469.png]: /images/20220327/b544f7ba1f704402869914fd4518f53d.png
[1106982-20171220001052381-1673830864.png]: /images/20220327/0c321451e3d34b328f71f46e9cd575e3.png
[1106982-20171220001146756-1000884181.png]: /images/20220327/2668ca3145d94c098e71eebf2bff79c9.png
[1106982-20171220001430834-1137894030.png]: /images/20220327/e9eba28125e548328b313253f9eba954.png
[github]: https://github.com/TopGuo/BF_FB