React Native - 12 - 现有APP接入

在原有的项目中支持 React Native

关键概念

• 设置React Native项目依赖和目录结构。
• 了解React Native组件，以及如何使用。
• 使用CocoaPods添加这些组件依赖关系。
• 在JavaScript开发React Native组件。
• 将RCTRootView添加到你的iOS应用程序。
• 这种观点将作为您的React Native组件的容器。
• 启动React Native服务器和运行您的APP程序。
• 验证应用程序的React Native方面是否按预期运行。

前提准备

• 调整文件结构
• 安装 javascript 依赖
  在项目的根目录新建文件 package.json, 内容为：

{
  "name": "ReactNativeApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  }
}

• 安装 pods 依赖

use_frameworks!
platform :ios,'9.0'

target 'NativeApp' do

  
  # Your 'node_modules' directory is probably in the root of your project,
  # but if not, adjust the `:path` accordingly
  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'

  target 'NativeApp_Tests' do
    inherit! :search_paths

  end
end

def remove_unused_yoga_headers
    filepath = './Pods/Target Support Files/yoga/yoga-umbrella.h'
    
    contents = []
    
    file = File.open(filepath, 'r')
    file.each_line do | line |
        contents << line
    end
    file.close
    
    contents.delete_at(14) # #import "YGNodePrint.h"
    contents.delete_at(14) # #import "Yoga-internal.h"
    
    file = File.open(filepath, 'w') do |f|
        f.puts(contents)
    end
end

post_install do | installer |
    remove_unused_yoga_headers
    
    # 处理 Swift 警告
    installer.pods_project.targets.each do |target|
        target.build_configurations.each do |config|
            config.build_settings['SWIFT_VERSION'] = '4.0'
        end
    end
end

执行 pod install 或 pod update

创建 react native server 文件

创建 index.js

import React from 'react';
import {AppRegistry, StyleSheet, Text, View} from 'react-native';
class RNHighScores extends [React.Component](http://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);

启动服务 npm start

在Native APP添加本地加载的方法，通过 RCTRootView 加载视图

NSURL *jsCodeLocation = [NSURL URLWithString:@"[http://localhost:8081/hello.bundle?platform=ios](http://localhost:8081/hello.bundle?platform=ios)"];
RCTRootView *rootView = [[RCTRootView alloc] initWithBundleURL: jsCodeLocation
                            moduleName: @"RNHighScores"
                        initialProperties: @{@"scores" : @[@{@"name": @"Alex", @"value": @"42"}, @{@"name" : @"Joel", @"value": @"10"}]}
                            launchOptions: nil];
UIViewController *vc = [[UIViewController alloc] init];
vc.view = rootView;
[self presentViewController:vc animated:YES completion:nil];

image.png

Enjoy coding!