將React Native0.53與現有的iOS整合

版本

• xcode 9.2(9C40b)
• react-native 0.53.0
• react 16.0.0-beta.5

參考

• React Native與iOS整合官方文件

• React Native iOS Pod issues: fatal error: 'algorithm' file not found

• React Native iOS Pod issues: Fix - Unable to build React target after a 'pod install'

• React Native iOS issues: Fishhook error

• React Native iOS issue: No component found for view with name "RCTText"

前言

這版本在與原專案集成的坑真的不是普通的多...希望下一版能全部修復

步驟

1. 新建一個iOS single view app,如果已經有iOS專案,可以跳到第三步

2. 初始化pod

   > pod init
   

3. 新增一個資料夾,然後在裡面新建一個ios資料夾,把iOS專案拉進來,這時目錄應該是這樣

   - RNFloder
       - ios
           - iosProjectName
               - ...
               - Assets.xcassets
               - ...
           - iosProjectName.xcodeproj
           - iosProjectName.xcworkspace
           - ... 
   

4. 在React Native根目錄初始化npm,npm是js的CocoaPods,一般只要一直按enter就好了,他會在你的目錄下多出一個package.json檔案,作用等同於Podfile

   > npm init
   

5. 接著安裝React Native相關的js lib,根據官方文件,必須要以下react版本,因為rn對react版本很敏感

   > npm install --save react@16.0.0-beta.5 react-native
   

6. 在Podfile中將React Native lib引入到專案

   target 'ReactNativeiOSHybrid' do
             use_frameworks!
     # 'node_modules'目錄一般位於根目錄中
     # 但是如果你的結構不同，那你就要根據實際路徑修改下面的`:path`
     pod 'React', :path => '../node_modules/react-native', :subspecs => [
       'Core',
       'DevSupport', # Include this to enable In-App Devmenu if RN >= 0.43
       'RCTText',
       'RCTNetwork',
       'RCTWebSocket', # needed for debugging
       'CxxBridge',
       # Add any other subspecs you want to use in your project
     ]
     # Explicitly include Yoga if you are using RN >= 0.42.0
     pod 'yoga', :path => '../node_modules/react-native/ReactCommon/yoga'
   
     # Third party deps podspec link
     pod 'DoubleConversion', :podspec => '../node_modules/react-native/third-party-podspecs/DoubleConversion.podspec'
     pod 'GLog', :podspec => '../node_modules/react-native/third-party-podspecs/GLog.podspec'
     pod 'Folly', :podspec => '../node_modules/react-native/third-party-podspecs/Folly.podspec'
   
   end
   
   # 這裡要注意,如果CocoaPods在install的時候出了問題,記得下pod cache clean --all,不然會有緩存導致之後改動Podfile還是會install失敗
   

7. CD到React Native目錄下的iOS目錄,安裝相關iOS lib

   > pod install
   

8. 啟動Xcode,run app

9. 這時候會發現有錯誤

   Yoga-internal.h:11:10 : fatal error: 'algorithm' file not found: #include 
   

10. 這是因為react native(或是yoga?反正都是facebook)官方podspec沒配置好

11. 接著按照github有一個還沒過的PR改動,打開以下文件

    > cd RNProject/node_modules/react-native/ReactCommon/yoga
    > vim yoga.podspec
    

12. 在最後面補上

        ...
        ...
      # Set this environment variable when not using the `:path` option to install the pod.
      # E.g. when publishing this spec to a spec repo.
      source_files = 'yoga/**/*.{cpp,h}'
      source_files = File.join('ReactCommon/yoga', source_files) if ENV['INSTALL_YOGA_WITHOUT_PATH_OPTION']
      spec.source_files = source_files
    
      # 補上以下兩句
      spec.public_header_files = 'yoga/Yoga.h', 'yoga/YGEnums.h', 'yoga/YGMacros.h'
    
    end
    

13. 這樣就解決了algorithm.h找不到的問題,問題解決,想了解更多可以看一下這個issue:React Native iOS Pod issues: fatal error: 'algorithm' file not found

14. 接著運行,還會報一個fishhook/fishhook.h頭文件找不到的問題

15. 找到該報錯文件,將報錯的import改成以下

    #import fishhook/fishhook.h -> #import fishhook.h
    

16. 問題解決,想了解更多可以看一下這個issue:React Native iOS issues: Fishhook error

17. 然後在React Native根目錄新增一個index.js文件,這個是用來測試的React Native頁面

    import React from 'react';
    import { AppRegistry, StyleSheet, Text, View } from 'react-native';
    
    class RNHighScores extends React.Component {
      render() {
        var contents = this.props['scores'].map((score) => (
          <Text key={score.name}>
            {score.name}:{score.value}
            {'\n'}
          </Text>
        ));
        return (
          <View style={styles.container}>
            <Text style={styles.highScoresTitle}>2048 High Scores!</Text>
            <Text style={styles.scores}>{contents}</Text>
          </View>
        );
      }
    }
    
    const styles = StyleSheet.create({
      container: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: '#FFFFFF',
      },
      highScoresTitle: {
        fontSize: 20,
        textAlign: 'center',
        margin: 10,
      },
      scores: {
        textAlign: 'center',
        color: '#333333',
        marginBottom: 5,
      },
    });
    
    // Module name
    AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
    

18. 然後在React Native根目錄執行以下指令,他會在local端開啟一個server,供React Native讀取我們開發中的Reat Native文件,他會自動打包成bundle

    > npm start 
    

19. 然後執行Xcode->run iOS專案,或是在根目錄

    > react-native run-ios
    

20. 如果你使用的是0.53.0版的React Native,你會出現以下錯誤

    No component found for view with name "RCTText"
    

21. 這是由於我們facebook工程師一個美妙的錯誤,詳情可以看以下issue:React Native iOS issue: No component found for view with name "RCTText"

22. 依照以上issue的解決方案,打開./node_modules/react-native/React.podspec

      s.subspec "RCTText" do |ss|
        ss.dependency             "React/Core"
    -   ss.source_files         = "Libraries/Text/*.{h,m}"
    +   ss.source_files         = "Libraries/Text/**/*.{h,m}"
      end
    

23. 在iOS目錄下重新 pod install

24. OK,畫面出現,歷經了千辛萬苦,終於可以愉快地使用React Native了

---

author Iml1s

email ImL1s@outlook.com

若我的文章有幫助到你,可以考慮請我喝杯咖啡:D