• 先看搞清楚项目目录情况: 第一层目录:项目根目录: ...另外假设已经全局安装好node、npm、cocoapods、react-native cli等工具,这些工具没有安装的,请先自行Google安装。Packages Installation 进入项目根目录 iOS
    > 先看搞清楚项目目录情况:
    
    ![项目目录](https://img-blog.csdn.net/20170713200722071?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQ2xvdWR5QmlyZA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
    
    > 第一层目录:项目根目录:  iOS-2028-master/
    > 第二层目录:原生项目根目录:iOS-2048-master/NumberTileGame/
    
    另外假设已经全局安装好node、npm、cocoapods、react-native cli等工具,这些工具没有安装的,请先自行Google安装。
    
    ### Packages Installation
    1. 进入项目根目录  `iOS-2028-master/`,新建`package.json`文件,在文件里输入如下内容:
    
    ```
    {
      "name": "NumberTileGame",
      "version": "0.0.1",
      "private": true,
      "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start"
      },
      "dependencies": {
        "react": "15.0.2",
        "react-native": "0.26.1"
      }
    }
    ```
    2. 在当前根目录 `iOS-2028-master/` 下执行 
    
    ```
    $ npm install
    ```
    
    ### React Native Framework
    
    1. 进入到原生项目根目录,通过`pod` 引入React Native Framework, 执行如下操作:
    
    ```
    ## In the directory where your native iOS code is located (e.g., where your `.xcodeproj` file is located)
    
    $ pod init
    ```
    2. 在创建好的Podfile中输入如下内容:
    
    ```
    # The target name is most likely the name of your project.
    target 'NumberTileGame' 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',
        'RCTText',
        'RCTWebSocket', # needed for debugging
        # Add any other subspecs you want to use in your project
      ]
      end
    ```
    3.  执行Pod安装
    
    ```
    $ pod install
    ```
    如果出现如下代码,表示安装正常
    ```
    Analyzing dependencies
    Fetching podspec for `React` from `../node_modules/react-native`
    Downloading dependencies
    Installing React (0.26.0)
    Generating Pods project
    Integrating client project
    Sending stats
    Pod installation complete! There are 3 dependencies from the Podfile and 1 total pod installed.
    ```
    
    ###代码集成
    ####The React Native component
    
    1. 进入项目根目录 `iOS-2048-master/` ,创建`index.ios.js`文件
    
    ```
    # In root of your project
    $ touch index.ios.js
    ```
    
    2. 在该文件中引入你要加入的react native code, 参考代码如下:
    
    ```
    'use strict';
    
    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 => {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('RNHighScores', () => RNHighScores);
    ```
    
    > RNHighScores is the name of your module that will be used when you add
    > a view to React Native from within your iOS application.
    
    
    ###The Magic: RCTRootView
    
    在 ViewController上面添加按键High Scores,同时添加点击事件:
    ![这里写图片描述](https://img-blog.csdn.net/20170713203154894?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQ2xvdWR5QmlyZA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
    
    然后再在ViewController里加入如下代码:
    
    ```
    #import "RCTRootView.h"
    ```
    
    ```
    - (IBAction)highScoreButtonPressed:(id)sender {
        NSLog(@"High Score Button Pressed");
        NSURL *jsCodeLocation = [NSURL
                                 URLWithString:@"http://localhost:8081/index.ios.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];
    }
    ```
    
    ### Test Your Integration
    
    #### App Transport Security
    在`info.plist`文件里加入:
    
    ```
    NSAppTransportSecurity
    
        NSExceptionDomains
        
            localhost
            
                NSTemporaryExceptionAllowsInsecureHTTPLoads
                
            
        
    
    ```
    
    #### Run the Packager
    
    ```
    # From the root of your project, where the `node_modules` directory is located.
    $ npm start
    ```
    
    #### Run the App
    
    ```
    # From the root of your project
    $ react-native run-ios
    ```
    ![这里写图片描述](https://img-blog.csdn.net/20170713203154894?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQ2xvdWR5QmlyZA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
    
    ![这里写图片描述](https://img-blog.csdn.net/20170713203732541?watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvQ2xvdWR5QmlyZA==/font/5a6L5L2T/fontsize/400/fill/I0JBQkFCMA==/dissolve/70/gravity/SouthEast)
    
    编译Xcode项目时,如果出现如下错误:
    编译报错如下:
    
    ```
    Undefined symbols for architecture x86_64:
    "std::terminate()", referenced from:
    ___clang_call_terminate in libReact.a(RCTJSCExecutor.o)
    "___cxa_begin_catch", referenced from:
    ___clang_call_terminate in libReact.a(RCTJSCExecutor.o)
    "___gxx_personality_v0", referenced from:
    -[RCTJavaScriptContext initWithJSContext:onThread:] in libReact.a(RCTJSCExecutor.o)
    -[RCTJavaScriptContext init] in libReact.a(RCTJSCExecutor.o)
    -[RCTJavaScriptContext invalidate] in libReact.a(RCTJSCExecutor.o)
    _RCTNSErrorFromJSError in libReact.a(RCTJSCExecutor.o)
    +[RCTJSCExecutor runRunLoopThread] in libReact.a(RCTJSCExecutor.o)
    -[RCTJSCExecutor init] in libReact.a(RCTJSCExecutor.o)
    -[RCTJSCExecutor context] in libReact.a(RCTJSCExecutor.o)
    ...
    ld: symbol(s) not found for architecture x86_64
    ```
    解决办法:
    
    ```
    在Other Linker Flags中添加-lc++即可。
    注:-lc++要添加在JavaScriptCore之后,否则编译也不过。
    ```
    
    编程成功,进入点击High Scores 进入React Native页面报错,请开启本地服务器:
    进入项目根目录 iOS-2048-master/ , 执行如下操作:
    
    ```
    $  npm start
    ```
    
    有其他各种常见问题,欢迎加我QQ1684484321讨论。
    
    展开全文
  • 现有Android项目集成ReactNative
  • 1.设置项目目录结构 原来项目中创建/android子目录,把之前所有的android项目都拷到/android子目录(因为react native支持android和ios,此时android只作为一个子模块)2.安装JavaScript依赖包 1)在项目(注意...
  • React Native for Android项目引入备注   jcenter上react native 最高版本只有0.20.1   react native 首先需要安装homebrew node.js 那一套软件之后index.android.js中编写入口   react native 引入...
  • Mac平台上开发React Native需要安装以下环境和工具: Note.js React Native Command Line Tools XCode/AndroidStudio
  • 本文是基于目前公司的一个真实项目编写的,由于是边实践边记录,遇到什么问题和如何解决的,所以你看这篇文章的时候,可能时候会觉得不是很流畅,特此说明。 引入React Native build.gradle配置 compile '...
  • React Native是非常强大的,但的时候我们可能并不需要从0开始去开发一个React Native应用,而是需要把它集成到我们现有的Android工程中去,去添加单个的React Native View。本章将主要介绍原生Android中集成...
  • (一)前言 前三节课程我们已经对于React Native For Android的环境搭建,IDE安装配置以及...移植我们已有的原生Android项目React Native中。 刚创建的React Native技术交流群(282693535),欢迎各位大牛,React Nativ
  • 项目是一个交流群里认识的群友的,他现在只能mac上跑通项目,所以我想试一下能不能windows环境下跑通Android项目 1.首先我是将项目放到了自己新建的RN目录的workspace文件夹下,像正常启动项目一样到目录下,...
  • 摘要 2015年是React Native发展的一年,2016年必定是React Native蓬勃的一年!2016年React Native很可能成为最为成功的开源技术之一。为什么React Native这么火呢?那么React Native相比H5、Native哪些优势呢?...
  • 如果新建一个react native项目Android中写native的话是很容易的,一般情况下项目已经存在,如何已经存在的app中引入react native呢?Prepare your app首先你的app中的build.gradle引入react native的jar包...
  • 自从Facebook的react native 出世以来,风靡一时,作为前端开发猿,我也从此踏入了这条不归路。。。 前言:本人一直习惯于用windows系统开发Android程序,鉴于此以后的react native项目博客都会是基于windows的...
  • React Native搭建简单的项目框架 React Native 是Facebook于2015年4月开源的跨平台移动应用开发框架, 短短的一两年的发展就已经很多家公司支持并采用此框架来搭建公司的移动端的应用, React Native使你能够...
  • 1 前言最近打算真的开始学习一下跨平台APP开发,一直关注RN,因此也打算真的开始学习下(其实是笔者的公司也开始这种跨平台的需求了,笔者一家传统公司)。最后开始打算从RN开始学起。废话不多说,开始搞起。2 ...
  • react-native 运行项目 2018-06-27 19:01:57
    2.react-native run-android 打包安卓项目,如果连接了手机,那么运行完后会直接发送到手机安装,如果没有连接手机,可以android\app\build\outputs\apk下找到刚才打包的文件,发送到手机安装或者手机模拟器上...
  • React Native 简称 RN 是 FaceBook 发布的跨平台开发框架,它的设计理念是:使用 React Native... React Native 发布的短短几年之内,已经很多使用 RN 技术开发的 App 上线, 其中就我们团队开发4个 App。它的...
  • https://www.draw.io/?client=1&lightbox=1&edit=_blank‘);}})(this);”/>
  • 1.本文的前提条件是,电脑上已经安装了CocoaPods,React Native相关环境。 2.使用Xcode新建一个工程。EmbedRNMeituan [图1] 3.使用CocoaPods安装React Native 工程目录下新建Podfile...
  • React Native出来已经也很长的时间了,虽然市面上还不是特别流行,但是各个大公司已经集成在项目中,以及完全使用React Native来开发应用。react native是否能够完全替代原生APP,我看来,所有简单的、没有...
  • 分享 50 个完整的 React Native 项目 原创 2017-04-17 勤劳的 ...
1 2 3 4 5 ... 20
收藏数 8,289
精华内容 3,315