xcode 无法reactnative
2019-01-27 17:21:00 weixin_34268169 阅读数 18

前言

  • 本文基于React native 0.44.3
  • 本文使用Pod方式

开始

1、创建package.json文件,配置类似如下(具体自己修改)

{
    "name": "ReactHome",
    "version": "0.0.1",
    "private": true,
    "scripts": {
        "start": "node node_modules/react-native/local-cli/cli.js start",
        "test": "jest"
    },
    "dependencies": {
        "react": "^16.0.0-alpha.6",
        "react-native": "^0.44.3",
        "react-native-update": "^4.0.6"
    },
    "devDependencies": {
        "babel-jest": "21.2.0",
        "babel-preset-react-native": "2.1.0",
        "jest": "21.2.1",
        "react-test-renderer": "16.0.0-alpha.6"
    },
    "jest": {
        "preset": "react-native"
    }
}
  • PS:可以使用 npm init 来创建package.json

2、使用命令 npm install 来创建node_modules文件

3、创建index.ios.js 文件是RN程序的入口文件。例子index.android.js 文件如下:

import React,{Component} from 'react';
import {
 AppRegistry,View,Text,
} from 'react-native';
 
class App extends Component{
 //...其他方法
 render(){
  return(
   <View>
    <Text>this is React Native Page</Text>
   </View>
  );
 }
  //...其他方法
}
AppRegistry.registerComponent('XXX', () => App);

4、终端进入到项目根目录,执行 touch Podfile,在Podfile文件中填写内容大致如下:(xxx是项目名)

platform :ios, ‘8.0’
target ‘xxx’ do
pod 'React', :path => ‘./node_modules/react-native', :subspecs => [
  'Core',
  'ART',
  'RCTActionSheet',
  'RCTAdSupport',
  'RCTGeolocation',
  'RCTImage',
  'RCTNetwork',
  'RCTPushNotification',
  'RCTSettings',
  'RCTText',
  'RCTVibration',
  'RCTWebSocket',
  'RCTLinkingIOS',
  ‘RCTAnimation’,
]
pod ‘Yoga’, :path => ‘./node_modules/react-native/ReactCommon/yoga’
end

5、使用命令pod install

6、查看是否已添加依赖,下面图所示

15598225-bef3f6eaee36614d.png
image.png

7、创建显示Vct,例子如下

#import "RCTRootView.h"

@interface RNTestVct ()

@end

@implementation RNTestVct

- (void)viewDidLoad {
    [super viewDidLoad];
    // Do any additional setup after loading the view.
    self.navigationController.navigationBar.hidden = YES;
    //显示RN视
    [self showReactNativeView]
}

- (void)didReceiveMemoryWarning {
    [super didReceiveMemoryWarning];
    // Dispose of any resources that can be recreated.
}
//显示RN视图
-(void) showReactNativeView
{
    //用户的信息
    NSDictionary *userInfo = @{@"name":@"Devil"};
    //需要传递的数据
    NSDictionary *paramsInfo = [[NSDictionary alloc] initWithObjects:@[userInfo] forKeys:@[@"userInfo"]];
    //debug时服务器地址
    NSString * jsCachePath = @"http://localhost:8081/index.ios.bundle?platform=ios&dev=true";
    //jsbundle地址
    //本地打好离线包的位置//    NSString *jsCachePath = [NSString stringWithFormat:@"%@/%@",[NSSearchPathForDirectoriesInDomains(NSDocumentDirectory, NSUserDomainMask, YES) lastObject],@"ReactNativeBundle/index.ios.jsbundle"];
    NSURL *jsCodeLocation = [NSURL URLWithString:jsCachePath];
    RCTRootView * rootView = [[RCTRootView alloc] initWithBundleURL:jsCodeLocation moduleName:@"ReactHome" initialProperties:paramsInfo launchOptions:nil];
    rootView.frame = [UIScreen mainScreen].bounds;
    [self.view addSubview:rootView];
}

@end

8、测试

  • 终端进入到项目根目录,执行 npm start
  • 接着运行IOS项目即可

转载于:https://www.jianshu.com/p/59c43ce3392e

2018-07-03 17:45:00 weixin_33724046 阅读数 50

1. "react-native": "0.55.4",在Xcode中运行报如下错误

1351482-5d308dd56fce12a1.png
01

2.解决方法,在如下文件修改引入代码


1351482-cd2b7dd0c6415626.png
02

3.


1351482-0dceb2a5761637ea.png
04

到此就能正常运行了

2017-06-09 10:43:36 qq_34161388 阅读数 2631

react native 无法reload的时候,在项目根目录下按住shift,鼠标右键点击“在此处打开命令窗口”,cmd命令运行如下:

react-native bundle –platform android –dev false –entry-file index.android.js –bundle-output android/app/src/main/assets/index.android.bundle –assets-dest android/app/src/main/res/
上面的命令的作用是 生成bundle文件并加载到assets目录底下。
命令运行显示成功后,安卓studio重新rebuild,重新安装apk即可。

2017-05-02 15:05:00 weixin_34054866 阅读数 7

RCTSRWebSocket.m 报错


// 第一处错误
SecRandomCopyBytes(kSecRandomDefault, keyBytes.length, keyBytes.mutableBytes);

// 第二处错误
SecRandomCopyBytes(kSecRandomDefault, sizeof(uint32_t), (uint8_t *)mask_key);

修改: 添加(void)


(void)SecRandomCopyBytes(kSecRandomDefault, keyBytes.length, keyBytes.mutableBytes);

(void)SecRandomCopyBytes(kSecRandomDefault, sizeof(uint32_t), (uint8_t *)mask_key);

RCTScrollView.m 报错

@implementation RCTCustomScrollView
{
  __weak UIView *_dockedHeaderView;
  RCTRefreshControl *_refreshControl; //加入此行
}
2018-09-14 13:32:08 wang_xingg 阅读数 553

1. 选中旧工程名,改为新的

这里写图片描述

然后选择rename

这里写图片描述

2. 依次选择黄色文件夹,修改名字,千万不要在Xcode外修改!!!

这里写图片描述

修改结果为

这里写图片描述

3. 点击搜索,搜索旧项目名

点击Find,改为Replace

全部替换掉

这里写图片描述

4. 此时,还剩下一些需要手动修改,再次查找

这里写图片描述

直至全部没有为止

5. 进入Tests和UITests文件夹,修改文件名,千万不要在Xcode外修改!!!

这里写图片描述

6. 此时基本全部搞定,但是会发现,最上面还是有没改过来的

这里写图片描述

 

Product中scheme,然后点击manage scheme

这里写图片描述

 

7.在react native工程选择index.js,修改

AppRegistry.registerComponent("Demo", () => App);

8.如果报什么文件没有找到,例如Tests.m未找到,就去看看实际文件夹里面是否有这个文件

React 与 React Native

阅读数 82

React和React native

阅读数 325

没有更多推荐了,返回首页