React-Native的巨坑

写一下在iOS原生的项目上集成React-Native遇到的坑.
因为Realm这个坑货居然不支持CocoaPods, 所以不得不以xcodeproj的方式引入到原生项目中, 其中有有很多坑。

突然找不到React的文件

上一秒还是 Build Successfully, Clean后再Build就提示找不到React的文件. 原因是Xcode默认开启了Parallelize Build, 在Build的过程中必须提前编译React，然后才到自己的项目。

In file included from ~/LocalSource/Hybird_ReactNative/Hybird_ReactNative/node_modules/react-native-cookies/ios/RNCookieManagerIOS/RNCookieManagerIOS.m:1:
In file included from ~/LocalSource/Hybird_ReactNative/Hybird_ReactNative/node_modules/react-native-cookies/ios/RNCookieManagerIOS/RNCookieManagerIOS.h:3:
../../../node_modules/react-native/React/Base/RCTBridgeModule.h:10:9: fatal error: 'React/RCTDefines.h' file not found
#import <React/RCTDefines.h>

解决方法

- In Xcode, go to the project scheme (Product -> Scheme -> Manage Scheme -> double click your project).

- Click on the 'Build' option at the left pane.

- Uncheck 'Parallelize Build' under Build Options.

- Then in Targets section, click '+' button then search for 'React'. Select it and click 'Add'.
'React' should now appear under Targets section. Click and drag it to the top so that it will be the first item in the list (before your project).

- Clean the project and build.

image.png

Library not loaded: @rpath/QBImagePicker.framework/QBImagePicker 报错

折腾了两天一直提示Library not loaded: @rpath/QBImagePicker.framework/QBImagePicker, 最后发现导入framework的地方不对, 必须是在Embeded Binaries导入而不是Linked Frameworks and Libraries(这个是导入.a的静态库)

image.png

报错: Unrecognized font family 'Material Icons'

项目中引入字体文件后，还需要xcode的Info.plist文件中, 加入: Fonts provided by application数组,并加入以下9项:

<key>UIAppFonts</key>
  <array>
    <string>Entypo.ttf</string>
    <string>EvilIcons.ttf</string>
    <string>FontAwesome.ttf</string>
    <string>Foundation.ttf</string>
    <string>Ionicons.ttf</string>
    <string>MaterialIcons.ttf</string>
    <string>Octicons.ttf</string>
    <string>SimpleLineIcons.ttf</string>
    <string>Zocial.ttf</string>
    <string>MaterialCommunityIcons.ttf</string>
  </array>

参考文章: React-native/issues/11721，react-native Unrecognized font family ‘Lonicons’解决方法