我已经挖掘了很多帖子试图使用 cocoapods为本地ios库设置一个反应原生项目,但我不可避免地在#import< React / RCTBundleURLProvider.h>中找到了丢失文件的错误.我的AppDelegate.m文件中的语句.

什么是使用反应原生的可可豆荚的正确方法?在这篇文章发表时,我目前的RN版本是0.43.4,而我正在使用Xcode 8.2.1.

这是我的过程,好奇我可能会出错:

1)在终端中,我使用react-native init TestProject创建一个新项目

2)我在该项目的ios目录中运行pod init

3)我在podFile中添加依赖项并运行pod install

4)安装过程成功,但我看到一个警告,我的目标覆盖’OTHER_LDFLAGS’,并建议我在Xcode中的链接器标志中使用$(inherit).

5)所以基于this SO post我将$(继承)添加到Project> TestProject> BuildSettings>联>其他链接器标志,否则是空的.我还检查并发现$(继承)已经存在于目标> TestProject>构建设置>联>其他链接器标志和预处理器宏也是如此.

6)此时我在#import< React / RCTBundleURLProvider.h>上看到React / RCTBundleURLProvider.h文件未找到错误. AppDelegate.m中的语句

7)基于this SO post我尝试删除节点模块目录并返回终端运行npm install并完成’react-native upgrade’.当它询问我是否要替换AppDelegate.m和project.pbxproj文件时,我说是的.

8)回到xCode我清理我的构建但仍然有来自步骤6导入< React / RCTBundleURLProvider.h>的错误

解决方法

我只是从干净的Xcode项目开始制作整个过程.通常我简单地创建RN应用程序,弹出然后转换为cocoapods ios部分.
它主要基于RN docs: http://facebook.github.io/react-native/docs/0.51/integration-with-existing-apps.html

所以环境:macOS Sierra,Xcode 9.2,RN 0.51.0

项目名称:MyApp

准备

>从“Single View App”模板,产品名称“MyApp”,语言Objective-C创建新的Xcode项目
>运行,看到它的工作原理
> cd MyApp,mkdir ios,mv MyApp * ios(将所有ios相关文件移至ios子文件夹)

安装npm依赖项

在项目的根文件夹中创建package.json(非常基本)

{
  "name": "MyApp","version": "0.0.1","private": true,"scripts": {
    "start": "node node_modules/react-native/local-cli/cli.js start"
  },"dependencies": {
    "react": "16.0.0","react-native": "0.51.0"
  },"devDependencies": {
    "babel-jest": "22.0.4","babel-preset-react-native": "4.0.0"
  }
}

运行npm install

Seup cocoapods

> cd ios
> pod init(生成Podfile)
>在MyApp目标中的Podfile中声明反应依赖项

pod 'React',:path => '../node_modules/react-native',:subspecs => [
    'Core','CxxBridge','RCTAnimation','RCTBlob','RCTText','RCTNetwork','RCTWebSocket','RCtimage','RCTLinkingIOS','DevSupport',]
pod 'yoga',:path => '../node_modules/react-native/ReactCommon/yoga'
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'

您可以添加/删除React subspecs以包含/删除RN功能,这是一个艰难的过程,因为RN组件不完全独立.

> pod install(将pod整合到项目中,将创建MyApp.xcworkspace,它应该用于编译应用程序)
>打开MyApp.xcworkspace,build&运行,应用程序应该仍然有效

嵌入RN Root View

用这个片段替换你的AppDelegate.m:

#import "AppDelegate.h"

#import <React/RCTBundleURLProvider.h>
#import <React/RCTRootView.h>
#if RCT_DEV
#import <React/RCTDevLoadingView.h>
#endif

@implementation AppDelegate

- (BOOL)application:(UIApplication *)application didFinishLaunchingWithOptions:(NSDictionary *)launchOptions {
  RCTBundleURLProvider* provider = [RCTBundleURLProvider sharedSettings];
  NSURL* jsCodeLocation = [provider jsBundleURLForBundleRoot:@"index" fallbackResource:nil];

  RCTBridge *bridge = [[RCTBridge alloc] initWithBundleURL:jsCodeLocation moduleProvider:nil launchOptions:launchOptions];
#if RCT_DEV
  [bridge moduleForClass:[RCTDevLoadingView class]];
#endif
  RCTRootView *rootView = [[RCTRootView alloc] initWithBridge:bridge moduleName:@"MyApp" initialProperties:@{}];
  rootView.backgroundColor = [[UIColor alloc] initWithRed:1.0f green:1.0f blue:1.0f alpha:1];

  self.window = [[UIWindow alloc] initWithFrame:[UIScreen mainScreen].bounds];
  UIViewController *rootViewController = [UIViewController new];
  rootViewController.view = rootView;
  self.window.rootViewController = rootViewController;
  [self.window makeKeyAndVisible];
  return YES;
}

@end

>向Info.plist添加ATS例外(或MyApp将无法使用http连接到打包服务器)

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSExceptionDomains</key>
    <dict>
        <key>localhost</key>
        <dict>
            <key>NstemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
        </dict>
    </dict>
</dict>

>编译&在模拟器中运行时,您应该会看到红色屏幕,并显示“没有捆绑URL存在”的消息. (这是因为没有运行包装器的服务器而且没有编译的jsbundle存在)

Javascript部分

使用此代码创建MyApp / index.js(它来自RN模板):

import { AppRegistry } from 'react-native';
import App from './App';
AppRegistry.registerComponent('MyApp',() => App);

创建MyApp / App.js:

import React from 'react';
import { StyleSheet,Text,View } from 'react-native';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>
          Welcome to React Native!
        </Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,justifyContent: 'center',alignItems: 'center',backgroundColor: '#F5FCFF',},welcome: {
    fontSize: 20,textAlign: 'center',margin: 10,});

>启动打包器npm从根项目文件夹(MyApp)开始
>从xcode运行应用程序,您应该看到加载指示器,然后看到RN渲染屏幕“欢迎使用React Native!”

包装机

>您还应该添加packager构建步骤,将已编译的js嵌入到app bundle main.jsbundle中,这样它就可以在没有packager dev服务器的情况下运行.

使用以下内容向MyApp目标的构建阶段添加脚本步骤:

export NODE_BINARY=node
../node_modules/react-native/scripts/react-native-xcode.sh

这个步骤对我有用.

在ios中使用带有React Native(0.43.4)的cocoapods的正确方法是什么?的更多相关文章

  1. HTML5 播放 RTSP 视频的实例代码

    目前大多数网络摄像头都是通过 RTSP 协议传输视频流的,但是 HTML 并不标准支持 RTSP 流。本文重点给大家介绍HTML5 播放 RTSP 视频的实例代码,需要的朋友参考下吧

  2. 利用Node实现HTML5离线存储的方法

    这篇文章主要介绍了利用Node实现HTML5离线存储的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  3. 详解如何通过H5(浏览器/WebView/其他)唤起本地app

    这篇文章主要介绍了详解如何通过H5(浏览器/WebView/其他)唤起本地app的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  4. H5混合开发app如何升级的方法

    本篇文章主要介绍了H5混合开发app如何升级的方法,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  5. AmazeUI 折叠面板的实现代码

    这篇文章主要介绍了AmazeUI 折叠面板的实例代码,本文通过实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下

  6. HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码

    这篇文章主要介绍了HTML5手指下滑弹出负一屏阻止移动端浏览器内置下拉刷新功能的实现代码,代码简单易懂,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

  7. Html5 video标签视频的最佳实践

    这篇文章主要介绍了Html5 video标签视频的最佳实践,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧

  8. html5唤起app的方法

    这篇文章主要介绍了html5唤起app的方法的相关资料,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  9. HTML5拍照和摄像机功能实战详解

    这篇文章主要介绍了HTML5拍照和摄像机功能实战详解,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧

  10. HTML5在微信内置浏览器下右上角菜单的调整字体导致页面显示错乱的问题

    HTML5在微信内置浏览器下,在右上角菜单的调整字体导致页面显示错乱的问题,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧

随机推荐

  1. iOS实现拖拽View跟随手指浮动效果

    这篇文章主要为大家详细介绍了iOS实现拖拽View跟随手指浮动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

  2. iOS – genstrings:无法连接到输出目录en.lproj

    使用我桌面上的项目文件夹,我启动终端输入:cd然后将我的项目文件夹拖到终端,它给了我路径.然后我将这行代码粘贴到终端中找.-name*.m|xargsgenstrings-oen.lproj我在终端中收到此错误消息:genstrings:无法连接到输出目录en.lproj它多次打印这行,然后说我的项目是一个目录的路径?没有.strings文件.对我做错了什么的想法?

  3. iOS 7 UIButtonBarItem图像没有色调

    如何确保按钮图标采用全局色调?解决方法只是想将其转换为根注释,以便为“回答”复选标记提供更好的上下文,并提供更好的格式.我能想出这个!

  4. ios – 在自定义相机层的AVFoundation中自动对焦和自动曝光

    为AVFoundation定制图层相机创建精确的自动对焦和曝光的最佳方法是什么?

  5. ios – Xcode找不到Alamofire,错误:没有这样的模块’Alamofire’

    我正在尝试按照github(https://github.com/Alamofire/Alamofire#cocoapods)指令将Alamofire包含在我的Swift项目中.我创建了一个新项目,导航到项目目录并运行此命令sudogeminstallcocoapods.然后我面临以下错误:搜索后我设法通过运行此命令安装cocoapodssudogeminstall-n/usr/local/bin

  6. ios – 在没有iPhone6s或更新的情况下测试ARKit

    我在决定下载Xcode9之前.我想玩新的框架–ARKit.我知道要用ARKit运行app我需要一个带有A9芯片或更新版本的设备.不幸的是我有一个较旧的.我的问题是已经下载了新Xcode的人.在我的情况下有可能运行ARKit应用程序吗?那个或其他任何模拟器?任何想法或我将不得不购买新设备?解决方法任何iOS11设备都可以使用ARKit,但是具有高质量AR体验的全球跟踪功能需要使用A9或更高版本处理器的设备.使用iOS11测试版更新您的设备是必要的.

  7. 将iOS应用移植到Android

    我们制作了一个具有2000个目标c类的退出大型iOS应用程序.我想知道有一个最佳实践指南将其移植到Android?此外,由于我们的应用程序大量使用UINavigation和UIView控制器,我想知道在Android上有类似的模型和实现.谢谢到目前为止,guenter解决方法老实说,我认为你正在计划的只是制作难以维护的糟糕代码.我意识到这听起来像很多工作,但从长远来看它会更容易,我只是将应用程序的概念“移植”到android并从头开始编写.

  8. ios – 在Swift中覆盖Objective C类方法

    我是Swift的初学者,我正在尝试在Swift项目中使用JSONModel.我想从JSONModel覆盖方法keyMapper,但我没有找到如何覆盖模型类中的Objective-C类方法.该方法的签名是:我怎样才能做到这一点?解决方法您可以像覆盖实例方法一样执行此操作,但使用class关键字除外:

  9. ios – 在WKWebView中获取链接URL

    我想在WKWebView中获取tapped链接的url.链接采用自定义格式,可触发应用中的某些操作.例如HTTP://我的网站/帮助#深层链接对讲.我这样使用KVO:这在第一次点击链接时效果很好.但是,如果我连续两次点击相同的链接,它将不报告链接点击.是否有解决方法来解决这个问题,以便我可以检测每个点击并获取链接?任何关于这个的指针都会很棒!解决方法像这样更改addobserver在observeValue函数中,您可以获得两个值

  10. ios – 在Swift的UIView中找到UILabel

    我正在尝试在我的UIViewControllers的超级视图中找到我的UILabels.这是我的代码:这是在Objective-C中推荐的方式,但是在Swift中我只得到UIViews和CALayer.我肯定在提供给这个方法的视图中有UILabel.我错过了什么?我的UIViewController中的调用:解决方法使用函数式编程概念可以更轻松地实现这一目标.

返回
顶部