1. 程式人生 > >IOS原生整合ReactNative

IOS原生整合ReactNative

     折騰了一天,看到網上很多帖子說原生整合RN使用cocopods 會報各種奇葩的錯誤,給我嚇得趕緊使用拖拉檔案的方式。哪知道一直沒成功。嘗試了下cocoapods整合RN,成功了,下面來分享下我的成功,嘻嘻~

1.首先新建個xcode工程

2.使用終端命令react-native init xxx  ;xxx是RN的專案名稱.

3.新建一個檔案存放RN整合到IOS原生專案需要的檔案。如圖RNCompent是新建的資料夾,吧第二部RN專案裡的index.js /node_modules/package.json 這三個檔案拷貝到RNCompent資料夾下。

4.index.js 程式碼如下 


import React, { Component } from 'react';
import {
  AppRegistry,  StyleSheet,  Text, View,  Image
} from 'react-native';

export default class RNT extends Component {
    render() {
        return (
            <View style={styles.container}>
              <Text style={styles.welcome}>
                nethanhan
              </Text>
            </View>
        );
    }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  }
});
//這裡的名字後面需要用到 RNT 
AppRegistry.registerComponent('RNT', () => RNT);

以上程式碼中 AppRegistry.registerComponent('RNT', () => RNT); 這句話很重要,是IOS整合RN的一個入口,RNT名字可以隨便起,作為後面的一個標示。

5.吧RNCompent資料夾拖到IOS原生專案的根目錄下,如下圖檔案路徑。以及RNCompent檔案內容

7.終端cd 到 RNTEST資料夾下,pod init ,成功之後vim Podfile。Podfile 內容如下:


# Uncomment the next line to define a global platform for your project
# platform :ios, '9.0'

target 'RNTEST' do
  # Uncomment the next line if you're using Swift or would like to use dynamic frameworks
  # use_frameworks!

  # Pods for RNTEST

  pod 'React', :path => '../RNCompent/node_modules/react-native', :subspecs => [
    'Core',
    'CxxBridge', # 如果RN版本 >= 0.47則加入此行
    'DevSupport', # 如果RN版本 >= 0.43,則需要加入此行才能開啟開發者選單
    'RCTText',
    'RCTNetwork',
    'RCTWebSocket', # 除錯功能需要此模組
    'RCTAnimation', # FlatList和原生動畫功能需要此模組
    # 在這裡繼續新增你所需要的其他RN模組
  ]
  # 如果你的RN版本 >= 0.42.0,則加入下面這行
  pod 'yoga', :path => '../RNCompent/node_modules/react-native/ReactCommon/yoga'

pod 'Folly', :podspec => '../RNCompent/node_modules/react-native/third-party-podspecs/Folly.podspec'

end

 

yoga /folly 的路徑寫錯了,會報“Unable to find a specification for `yoga (= 0.57.0.React)`” 錯誤,以及以下編譯錯誤

6.Podfile完成之後,儲存退出,在終端執行pod Install 命令。成功之後進入專案。 

7. 

8,至此IOS原生整合React Native算是完成了,有問題留言哦~