与现有的应用程序集成.pdfVIP

与现有的应⽤程序集成 由于 React 并没有做出关于你其他的技术堆栈的假设——通常在 MVC 中简单的 用 V 来表示——这很容 嵌入到现有 non-React Native 应用程序中。事实上，它 与另外的最佳实践社区工具集成了，如 CocoaPods。 需求 CocoaPods - gem install cocoapods Node.js - brew install node 用 CocoaPods 安装 React Native CocoaPods 是 iOS/Mac 开发的管理工具包。我们需要用它来下载 React Native。 如果你还没有安装 CocoaPods，请查看本教程。 当你准备使用 CocoaPods 工作时，添加以下行到 Podfile 中。如果你没有，那么 在你的项目的根目录下创建它。 pod React pod React/RCTText # Add any subspecs you want to use in your pro ect 记得安装所有你需要的 subspecs。没有 pod React/RCTText ，Text 元素 不能使用。 然后安装你的 pods： $ pod install 创建你的 React Native 应用程序 有两块你需要设置： 1. 根 JavaScript 文件，该文件将包含实际的 React Native 应用程序和其他组 件 2. 包装 Objective - C 代码，将加载脚本并创建一个 RCTRootView 来显示和 管理你的 React Native 组件 首先，为你的应用程序的 React 代码创建一个目录，并创建一个简单 的 index.ios. s 文件： $ mkdir ReactComponent $ touch index.ios. s 为 index.ios. s 复制 粘贴以下 starter 代码——它是一个 barebones React Native 应用程序： use strict;var React = require(react-native);var { Text, View } = React;var styles = React.StyleSheet.create({ container: { flex: 1, backgroundColor: red } });class SimpleApp extends React.Component { render() { return ( View style={styles.container} TextThis is a simple application./Text /View ) } } React.AppRegistry.registerComponent(SimpleApp, () = SimpleApp ); SimpleApp 将是你的模块名称，这将在后面使用。 将容器视图添加到你的应用程序中 现在，你应该为 React Native 组件添加一个容器视图。在你的应用程序中它可以是 任何的 UIView 。 但是，为了使代码简洁，让我们把 UIView 归入子类。让我们把它命名 为 ReactView 。打开你的Yourpro ect.xcworkspace ，并创建一个新 类 ReactView 你可以把它命名为任何你喜欢的名字：))。 // ReactView.h #import UIKit/UIKit.h @interface ReactView : UIView @end 在一个视图控制器中，想要管理这一视图，继续添加一个出口并将其连接： // ViewController.m @interface ViewController () @property (weak, nonatomic) IBOutlet ReactView *reactView; @end 在这里我简单的禁用了 AutoLayout。在实际产品中，你应该自己打开 Au