2019-10-24 09:59:05 ywl570717586 阅读数 103

一、使用Mac电脑

二、打开vscode,打开ReactNative项目代码,npm install安装依赖

三、启动项目,使项目能正常运行

使用Xcode打开项目中ios文件下的axychzApp.xcodeproj,点击三角形按钮启动,然后等待

1.解决运行报错[] nw_connection_get_connected_socket 18 Connection has no connected handler 问题,如没报错,直接跳到下一步

这个问题是由于警告过多造成的,使用以下方法可以解决报错

https://www.jianshu.com/p/ee837fbf3535

2.有时会出现IOS环境缺少依赖的情况,按这篇文章相似操作可以手动链接上依赖:ReactNative文档查看组件:react-native-doc-viewer

https://www.jianshu.com/p/a9fd78cbf02e

3.正常情况下是能正常启动,如有问题就按模拟器的提示解决问题。

4.模拟器正常开启项目,那说明程序运行环境已经完成,可以关掉模拟器了,下面开始打包ipa操作

四、打包ipa

1.发现Archive按钮一直为灰色不可点击

解决办法:目前的运行配置是使用模拟器,改成“iOS Device”即可

2.创建Development开发证书和Distribution发布证书

开发证书可以打内部使用、通过UDID指定的iphone手机使用的ipa包,发布证书可以打上架AppStore的大家都能用的ipa包。

在苹果开发者网站(https://developer.apple.com/cn/develop/)创建证书:

这是一篇关于证书的神文,内容很全:

https://www.jianshu.com/p/304ec98842e1

下面是其他资料,可以用来参考

iOS开发证书和生产证书:

https://www.jianshu.com/p/63eca43c175e

https://www.jianshu.com/p/083c72de47b0

https://blog.csdn.net/dingqk/article/details/79007072

ios发布到appStore遇到证书问题“has one iOS Distribution certificate but its private key is not installed

获取Xcode 中项目bundle ID 地址:

https://blog.csdn.net/wangsun300/article/details/100045974

什么是p12证书?ios p12证书怎么获取?

https://www.jianshu.com/p/fdc3ccc3f3de

上面文章有没提到的一点,在导入完证书后可能会报红:

provisioning profile doesn't support the wireless accessory configuration / apple pay等等。。

只需要在苹果开发者平台生成证书的时候把相应的wireless accessory、apple pay等勾选上在下载证书就可以了。

react native打包ios,并修改app图标,名称和启动页:

https://blog.csdn.net/weixin_42185136/article/details/88716377

2016-06-13 15:47:21 u011068996 阅读数 1762

欢迎大家访问我的个人网站 - Sunday俱乐部


ReactNative官网提供的环境搭建方式:http://reactnative.cn/docs/0.27/getting-started.html

按照官网提供的方式去走,直接使用XCode打开AwesomePrjoect/iOS/AwesomeProject.xcodeproj,IOS版本完美运行,但是到了Android端就没有那么顺心了,使用Android Studio打开去运行Android项目的时候,我X,一片红啊,什么鬼。
这里写图片描述
8081端口找不到?怎么会这样,我加载的应该是本地的HTML应该与网络无关才对啊?一脸茫然去网上各种搜,终于找到了解决方案。


原来需要运行一个 React的模拟服务,解决方案如下。

1、进入项目根目录,运行运行packager(服务端)

react-native start

2、保持packager开启,另外打开一个命令行窗口,进入项目根目录,然后在工程目录下运行

react-native run-android

3、摇晃设备或按Menu键可以打开调试菜单,点击Dev Settings,选Debug server host for device,输入你的正在运行packager的那台电脑的局域网IP加:8081(同时要保证手机和电脑在同一网段,且没有防火墙阻拦),再按back键返回,再按Menu键,在调试菜单中选择Reload JS,就应该可以看到运行的结果了。
这里写图片描述

然后使用WebStrom(官方推荐11以上,百度都提供破解方式了http://jingyan.baidu.com/article/c35dbcb0f97e5c8916fcbc8c.html)配合Android Studio就可以进行ReactNative开发编码了。

2019-03-13 18:24:00 wgwxf 阅读数 270

零、开场白

公司第一款ReactNative APP,android打包很简单,IOS遇坑很多,记录下。

一、生成bundle文件

新建bundle目录

在生成的RN工程中,找到ios目录,在该目录下新建bundle目录

进入项目目录

在package.json中添加scripts:

"bundle-ios": "node node_modules/react-native/local-cli/cli.js bundle --entry-file index.js  --platform ios --dev false --bundle-output ./ios/bundle/index.ios.jsbundle --assets-dest ./ios/bundle"

运行:

tyarn run bundle-ios 或 npm run bundle-ios

命令解释:

–entry-file ,ios或者android入口的js名称,比如index.js
–platform ,平台名称(ios或者android)
–dev ,设置为false的时候将会对JavaScript代码进行优化处理。
–bundle-output, 生成的jsbundle文件的名称,比如./ios/bundle/index.ios.jsbundle
–assets-dest 图片以及其他资源存放的目录,比如./ios/bundle

执行成功后可以在ios目录下bundle中看到包含的离线资源:
在这里插入图片描述

二、在Xcode中集成

Xcode打开项目

在这里插入图片描述
选择RN项目内ios目录打开。

引入离线包
  1. Add Files to “RNIos”
    在这里插入图片描述
  2. 选择bundle文件,在option中选择Create folder references在这里插入图片描述
    添加到项目中的文件夹必须是蓝色
    在这里插入图片描述
设置AppDelegate.m文件

修改AppDelegate.m中的加载包的方式(只需修改一次),之后项目会自动跟据debug还是release状态加载不同的包,修改包的位置指向bundle/index.ios

NSURL *jsCodeLocation;
#ifdef DEBUG
     //开发包
     jsCodeLocation = [[RCTBundleURLProvider sharedSettings] jsBundleURLForBundleRoot:@"index.ios" fallbackResource:nil];
#else
     //离线包
    jsCodeLocation = [[NSBundle mainBundle] URLForResource:@"bundle/index.ios" withExtension:@"jsbundle"];
#endif
真机调试

如果你需要在真机上启用调试功能,则需要打开RCTWebSocketExecutor.m文件,然后将其中的"localhost"改为你的电脑的IP地址,最后启用开发者菜单中的"Debug JS Remotely"选项。

打包运行

将项目由debug状态改成release状态,Xcode–>Product–>Scheme–>Edit Scheme…
在这里插入图片描述
选择 Generic iOS Device ,修改Version和Build号

三、异常处理

编译报错,提示“‘React/RCTBundleURLProvider.h’ file not found”

sudo npm install -g react-native-cli
如果速度慢:
sudo npm config set registry https://registry.npm.taobao.org --global
sudo npm config set disturl https://npm.taobao.org/dist --global

报错“Signing for “qbank_rn” requires a development team. Select a development team in the project editor. (in target ‘qbank_rn’)”

在这里插入图片描述

编译成功,运行报错“(evaluating ‘v.registerApp’)” “libc++abi.dylib: terminating with uncaught exception of type NSException”

项目中用到了react-native-wechat,需要按照官方教程配置:
https://github.com/yorkie/react-native-wechat/blob/master/docs/build-setup-ios.md
https://www.jianshu.com/p/3f424cccb888

当然别忘了react-native link

2018-03-07 17:52:16 qq_18425273 阅读数 1974

这段时间研究了一下ReactNative调用原生OC的功能,在网上查了些资料,不过感觉还不是很完整,所以在这里把所有流程写下来,供大家参考
step1:要想RN调用原生,必须先从终端下载一个RN的简单模板,方法就不在这里说说,具体的看RN官网


step2: 在进入下载完成的文件
这里写图片描述
里面iOS文件里就是可以用xcode打开,App.js文件就是RN里面的内容


step3:
打开用xcode打开iOS文件打开后,创建一个继承自NSObject的文件我的就叫createCat,然后才.h文件里引入桥接文件RCTBridge这里这个桥接文件是沟通RN和OC的关键,有时引入的时候会报红,或报错,一般是没有把这个文件链接入工程,所以需要引入这文件这里面4个圈表示4个关键位置这里RCTBridge的结构如下图所示
这里写图片描述

引入完成后 编译一下,通过后就可以开始下一步编写oc内容了


step4

h文件内容

#import <Foundation/Foundation.h>
#import <React/RCTBridge.h>

@interface CreatCat : NSObject <RCTBridgeModule>

@end

m文件内容

#import "CreatCat.h"
#import <React/RCTEventDispatcher.h>
@implementation CreatCat


RCT_EXPORT_MODULE();

//一个参数
RCT_EXPORT_METHOD(calliOSActionWithOneParams:(NSString *)name)
{
}

RCT_EXPORT_METHOD( cratCat:(NSString *)name sex:(NSString *)sex age:(int)age)
{
  NSLog(@"我创建了一只名叫%@的猫,性别%@, 今年%d岁", name, sex, age);
}

//对外提供调用方法
RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location){
  NSLog(@"Pretending to create an event %@ at %@", name, location);
}

//方法3
RCT_EXPORT_METHOD(whoName:(NSString *)name age:(int)age location:(NSString *)location){
  NSLog(@"可以的%@,年来%d,还有%@",name,age,location);
}

//回调
//RCTResponseSenderBlock
//RCTResponseSenderBlock只接受一个参数,为数组,把需要回调的参数加入到数组中,回调回去
RCT_EXPORT_METHOD(calliOSActionWithCallBack:(RCTResponseSenderBlock)callBlock){
  NSString *string=@"hello";

  NSArray *array=@[@"RN",@"and",@"iOS"];

  NSString *end=@"goodbay";

  //更多参数放到数组中进行回调
  callBlock(@[string,array,end]);
}



@end

OC内的方法就是这些,这里面还可以写其他复杂点的内容,在这里就不赘述了


* step5:*接下来开始编写RN的模块内容打开文件里面的App.js文件添加调用内容

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  NativeModules,
  TouchableOpacity
} from 'react-native';

//在JavaScript中调用Object-C定义的方法,需要先导入NativeModules
//此处的RNCalliOSAction就是我们在iOS上新建的类名
//如果在iOS中设置了导出了类的名字,此处需要和导出的名字一致
var cat = require('react-native').NativeModules.CreatCat;

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' +
    'Cmd+D or shake for dev menu',
  android: 'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});

type Props = {};
export default class App extends Component<Props> {

constructor(props){
        super(props);

        this.state={
            callBackData:'',
        }

    }

show(){
    // alert("aa")
    // cat.cratCat('机器猫', '男', 2);
    // cat.addEvent("血雨声","zaijia")
    cat.whoName("xieyusheng",12,"官渡")
  }

  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome} onPress={()=>this.show()}>
          Welcome to React Native!
        </Text>
        <Text style={styles.instructions}>
          To get started, edit App.js
        </Text>
        <Text style={styles.instructions}>
          {instructions}
        </Text>
       <TouchableOpacity style={{height:60,marginTop:30}} onPress={()=>{ //此处的(string,array)参数列表要和回调时传的参数列表要一致。位置一样才可以获取正确的数据
                cat.calliOSActionWithCallBack((string,array,end)=>{
                    console.log(string);
                    console.log(array);
                    console.log(end);
                    let data=string+'  '+array[0]+'  '+array[1]+'  '+array[2]+'  '+end;

                    this.setState({
                        callBackData:data,
                    })

                });
            }}>
              <Text>点击调用iOS原生方法,并得到回调</Text>
              <Text>回调结果callBack:{this.state.callBackData}</Text>
          </TouchableOpacity>

      </View>
    );
  }
}

添加好调用内容后打开的Xcode中或者用终端打开这个RN项目都可以运行。开始后点击就可以看到效果了。还有什么不懂的,可以私信我。

Demo: https://github.com/zyHit-GitHub/RNBridge.git

2019-06-12 14:44:08 jean850218 阅读数 53

这是一篇学习reactNative的踩坑问题整理,写了一个小Demo后,发现学会reactNative后还要学会安卓和IOS的兼容性处理,进入到了另一个前端领域,所以暂时只写了个小Demo了解一下,没有继续深入。

目录结构说明

  • android/ android 原生代码(使用 android studio 要打开这个目录,如果直接打开父目录报错)
  • ios/ ios 原生代码(使用 xcode 打开这个目录,如果直接打开父目录报错)
  • index.js 打包 app 时进入 react native(js 部分) 的入口文件(0.49 以后安卓、ios 共用一个入口文件)
  • App.js 可以理解为 react native(js 部分) 代码部分的入口文件,比如整个项目的路由在这里导入

上面是最重要的四个目录/文件,其他说明如下:

  • test/ 测试用(暂未使用)
  • app.json 项目说明,主要给原生 app 打包用,包括项目名称和手机桌面展示名称 React Native : 0.41 app.json
  • package.json 项目依赖包配置文件
  • node_modules 依赖包安装目录
  • ejg kw yarn.lock yarn 包管理文件
    其他配置文件暂时无需改动,在此不做说明

启动服务

react-native run-android

js代码热更新

在模拟器中按ctrl+m,打开菜单,运行Reload

开发中遇到的问题收集

  1. 按示例代码敲出的问题

0.57.3使用Button报错java.lang.String cannot be cast to

已确认由于官方合并代码不完整,导致0.57.3的Button组件存在bug,在官方发布0.57.4之前的解决办法(二选一)是

使用Touchable组件代替Button

降级到0.57.1 yarn add react-native@0.57.1 schedule@0.4.0 ,必要的话删除node_modules重新yarn, 以及务必重启packager

const instructions = Platform.select({
  ios: 'Press Cmd+R to reload,\n' + 'Cmd+D or shake for dev menu',
  android:
    'Double tap R on your keyboard to reload,\n' +
    'Shake or press menu button for dev menu',
});
  1. 安装好js插件后,再运行报命令失效
    在这里插入图片描述
    打开翻墙,再次运行run-andriod又可以 ==!

疑问

  1. 如何更改app名
  2. 如何打包app

最近在敲reactNative的示例代码,脑中又有新的问题涌现,他相对于React来说,虽然很多范式和写法是一样的,但终究有些API是重写过的,如何实现,一套代码多平台呢。
即,我一个功能写完了后在H5平台运行,我又如何能在安卓中间无缝迁入进来。

React Native_真机调试

阅读数 3050

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