• iOS原生项目中插入react native的教程
    如果你在找在原生项目中插入react native的教程,那么这将是你最后查找的教程。O(∩_∩)O
    
    本文的前提是电脑已经安装过React-Native相关环境和cocoapods。
    **STEP 1 安装node_modules包**
    
    创建package.json文件在项目的根目录下,这是为工程添加依赖库。里面有工程的版本信息和所需要的依赖库,第三方库等
    例子如下
    
    ```
    {
      "name": "YourProjectName",
      "version": "0.0.1",
      "private": true,
      "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start"
      },
      //所需要的库
      "dependencies": {
        "react": "15.2.1",
        "react-native": "0.31.0",
        "react-native-looped-carousel": "0.0.12",
        "react-native-swiper": "^1.4.9"
      }
    }
    ```
    
    然后在项目的根目录下 
    
    ```
    npm install
    ```
    安装package.json中所需要的库。
    **STEP 2 pod所需要的库到工程**
    创建podfile文件,利用Cocoapods安装podfile中所涉及到的库。
    
    ```
    target 'YourProjectName' 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 => [#pod的路径
        'Core',
        'RCTText',
        'RCTWebSocket', # 你需要用到的库
      ]
    
    end
    ```
    然后进行 pod install 安装库
    
    ```
    pod install
    ```
    **STEP 3 创建index.ios文件**
    在根目录下创建index.ios文件。为了方便我们直接把代码写到了根目录下。
    
    ```
    'use strict';
    
    import React from 'react';
    import {
      AppRegistry,
      StyleSheet,
      Text,
      View
    } from 'react-native';
    
    class YourProjectName extends React.Component {
      render() {
        var contents = this.props["scores"].map(
          score => {score.name}:{score.value}{"\n"}
        );
        return (
          
            
              2048 High Scores!
            
            
              {contents}
            
          
        );
      }
    }
    
    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('YourProjectName', () => YourProjectName);
    ```
    **STEP 4添加到原生项目**
    首先导入头文件
    
    ```
    #import "RCTBundleURLProvider.h"
    #import "RCTRootView.h"
    ```
    获得RCTRootView
    
    ```
     NSURL *jsCodeLocation = [NSURL
                                 URLWithString:@"http://localhost:8081/index.ios.bundle?platform=ios"];
        RCTRootView *rootView =
        [[RCTRootView alloc] initWithBundleURL : jsCodeLocation
                             moduleName        : @"YourProjectName"
                             initialProperties :
         @{
           @"scores" : @[
                   @{
                       @"name" : @"Alex",
                       @"value": @"42"
                       },
                   @{
                       @"name" : @"Joel",
                       @"value": @"10"
                       }
                   ]
           }
                              launchOptions    : nil];
        self.view = rootView;
    
    ```
    到这里基本就结束了,但是现在运行会提示服务器没有打开,这时候在根目录下npm start 开启服务器,在运行项目或者react-native run-ios。就大功告成了。
    展开全文
  • 一直想写一下我在React Native原生模块封装方面的一些经验和心得,来分享给大家,但实在抽不开身,今天看了一下日历发现马上就春节了,所以就赶在春节之前将这篇博文写好并发布。
  • 前言 最近用RN开发SDK,涉及RN与iOS各种交互。 有些交互比如用iOS原生切换多个RN页面,以及iOS调用RN的方法,按照网上的方法调...一、 iOS 调用ReactNative 1,打开一个ReactNative页面 2,多个ReactNative页面...
  • 在学习RN中遇到过一个问题,就是原生页面通过navigation push到一个Rn页面,如果使用原生的navigation的话,rn页面中的导航头无法定义title、左右按钮等等自定义控件,为了解决这个问题,可以在原生页面push事件触发...
  • 1.本文的前提条件是,电脑上已经安装了CocoaPods,React Native相关环境。 2.使用Xcode新建一个工程。EmbedRNMeituan [图1] 3.使用CocoaPods安装React Native 在工程目录下新建Podfile...
  • iOS原生项目集成RN步骤(确保已经安装React Native环境): 1,使用Xcode创建项目,RNProject 在根目录下创建ios目录,将xcode创建的工程等相关文件移到ios目录下。 2,在项目根目录下添加package.json文件,如下...
  • 本文将讲述下在原生React Native之间的通信方式。方式和逻辑综合了自己的思维方式,主要参考了React Native中文官方文档,因为感觉它讲的方式有些不妥,所以就按自己思路组织了下文。 虽然发觉一遍文章要把所有...
  • React Native支持在其基础上编写原生代码, 具有访问平台所有的能力.在日常开发中,github上很多的RN组件已经满足了大家的使用.如果有不支持你需要的原生特性的需求出现,就需要自己该特性的封装.参考rn中文网.在React ...
  • 对于如何封装原生iOS组件供react-nativereact-native中文网已经给出了方法,但是初看之下确实有很多疑惑,在自己查看了底层,并封了UIButton供rn调用之后,也有了一些小小的看法和心得,当然自己的写法对于新手...
  • 最近项目需要React Native原生的交互,当需要用到跳转的时候,官方文档写的也是云里雾里,网上的博客也是你吵我我抄你,乱糟糟一片.最终关于RN跳转原生自己使用的方法,亲证有效.具体原理好好看一下就能理解,直接贴...
  • 项目 中 采用React Native 开发 ,观看直播调用iOS 原生接口 RN代码 import React, { Component } from 'react'; import { Platform, StyleSheet, Text, View, TouchableHighlight, NativeModules, ...
  • 我在github上更新了我学习react-native的一些心得和小技巧,下面的这个例子也在里面,如果现在的项目不忙,基本每天都会更新,...前端时间写过两篇关于在原生iOS项目中新建react-native页面,并跳转到原生的文章,但昨
  • 下面有个Demo介绍原生iOS项目是如何与React Native集成的。先贴下React Native中文网是官方教程:[React Native嵌入到现有原生应用](https://reactnative.cn/docs/0.43/integration-with-existing-apps/) ...
  • ios原生集成React Native 2016-01-29 09:11:58
    安装react native依赖本例在工程跟目录下创建了一个ReactComponent文件夹用来存放react native文件。终端进入ReactComponent目录,执行npm install react-native –save安装react native依赖。通过cocoapods对工程...
  •  有时候我们并不是需要全部使用React Native,我们想和原生混合开发,那我们应该怎么办呢。 先看一下我集成完之后的项目目录: 首先安装React Native node组件  1、新建一个文件夹如目录中的RN,这个...
  • 第一步File->New->Project->Cocoa Touch Static Library本次采用object-c语言第二步实现了“RCTBridgeModule”协议//// RCTStatusbarProps.h// RCTStatusbarProps//// Created by bhsj_imac...
  • React-Native调用iOS原生方法 2017-05-25 14:01:48
    React-Native在开发工程中也有许多实现不了的功能,这就需要借助原生应用来实现了,React-Native实现和iOS原生交互只需要进行以下几个步骤即可。1、导入RCTBridgeModule头文件#import <React/RCTBridgeModule.h>2、...
  • ReactNative开发中, 在JavaScript语法无法实现的时候会涉及到一些原生开发, 既然是混合开发就会涉及到一些iOSReactNative之间通讯的问题, 这里就涉及到两种方式: RN调用原生的方法, 给原生发送数据 原生给RN...
  • 大楼不是一天所建成,是时间慢慢积累起来滴,原先用原生写的项目,没办法将项目中所有的代码都换成RN,而且我也不...本篇文章记录了在已经创建好的原生项目上集成react-native的过程。前提:电脑已经安装过React-...
  • http://www.jianshu.com/p/e16c91acce03
1 2 3 4 5 ... 20
收藏数 10,175
精华内容 4,070