美文网首页
RN集成到现有应用

RN集成到现有应用

作者: L小杰 | 来源:发表于2019-03-29 16:44 被阅读0次
    1. 配置项目目录结构
      首先创建一个空目录用于存放 React Native 项目,然后在其中创建一个/ios子目录,把你现有的 iOS 项目拷贝到/ios子目录中。
      2.在项目根目录下创建一个名为package.json的空文本文件,然后填入以下内容:
    {
      "name": "MyReactNativeApp",
      "version": "0.0.1",
      "private": true,
      "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start"
      }
    }
    

    接下来我们使用 yarn 或 npm(两者都是 node 的包管理器)来安装 React 和 React Native 模块。请打开一个终端/命令提示行,进入到项目目录中(即包含有 package.json 文件的目录),然后运行下列命令来安装:
    yarn add react-native
    这样默认会安装最新版本的 React Native,同时会打印出类似下面的警告信息(你可能需要滚动屏幕才能注意到):
    warning "react-native@0.52.2" has unmet peer dependency "react@16.2.0".
    这是正常现象,意味着我们还需要安装指定版本的 React:
    $ yarn add react@16.2.0
    注意必须严格匹配警告信息中所列出的版本,高了或者低了都不可以。

    接下来需要在podfile里添加依赖库

    # target的名字一般与你的项目名字相同
    target 'NumberTileGame' do
    
      # 'node_modules'目录一般位于根目录中
      # 但是如果你的结构不同,那你就要根据实际路径修改下面的`:path`
      pod 'React', :path => '../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 => '../node_modules/react-native/ReactCommon/yoga'
    
      # 如果RN版本 >= 0.45则加入下面三个第三方编译依赖
      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
    

    代码集成

    1. 创建一个index.js文件
      首先在项目根目录下创建一个空的index.js文件。
    2. 添加你自己的 React Native 代码

    在index.js中添加你自己的组件。这里我们只是简单的添加一个<Text>组件,然后用一个带有样式的<View>组件把它包起来。

    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,
      },
    });
    
    // 整体js模块的名称
    AppRegistry.registerComponent('RNHighScores', () => RNHighScores);
    

    RNHighScores是整体 js 模块(即你所有的 js 代码)的名称。你在 iOS 原生代码中添加 React Native 视图时会用到这个名称。

    掌握核心科技: RCTRootView
    现在我们已经在index.js中创建了 React Native 组件,下一步就是把这个组件添加给一个新的或已有的ViewController。
    首先导入RCTRootView的头文件。
    #import <React/RCTRootView.h>
    这里的initialProperties注入了一些演示用的数据。在 React Native 的根组件中,我们可以使用this.props来获取到这些数据。

        NSURL *jsCodeLocation = [NSURL URLWithString:@"http://localhost:8081/index.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];
    
    1. 添加 App Transport Security 例外
    <key>NSAppTransportSecurity</key>
    <dict>
        <key>NSExceptionDomains</key>
        <dict>
            <key>localhost</key>
            <dict>
                <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
                <true/>
            </dict>
        </dict>
    </dict>
    

    4.运行 Packager
    要运行应用,首先需要启动开发服务器(即 Packager,它负责实时监测 js 文件的变动并实时打包,输出给客户端运行)。具体只需简单进入到项目根目录中,然后运行:
    npm start
    5.运行应用
    如果你使用的是 Xcode,那么照常编译和运行应用即可。如果你没有使用 Xcode(但是你仍然必须安装 Xcode),则可以在命令行中使用以下命令来运行应用:
    react-native run-ios

    相关文章

      网友评论

          本文标题:RN集成到现有应用

          本文链接:https://www.haomeiwen.com/subject/vpqrbqtx.html