CC's blog

CC的技术博客 专注于 it 互联网的技术爱好者

分类 React Native 下的文章

React-Native 增强框架(MCRN)

React-Native 增强框架(MCRN)

特点
1抹平平台差异
2更加强大的原生 Api 能力
3自动缓存系统
4逐步完善的全局组件库
5自动页面追踪
6更强大的 Debug 模式

阅读全文
none

React Native 函数作为iOS原生回调

React Native 函数作为iOS原生回调

  • 起因,在封装地图控件中我们的React native Mapview 不是我们想象中的那么完美,要想和原生控件想媲美估计还需等到RN后续更新,于是乎,我们的业务需求又不能因为技术问题所流产,那么就需要我们使用原生的控件去封装
  • 那么问题就来了,在原生控件的时间处理不确定的情况下,我们就需要在RN中将时间传递给原生,那么需求就来了.博主曾经看到过一篇写React Native 不能作为原生的回调.在此,可以完全推翻此种谬论,
    如下

原生视图处理


#import <MapKit/MapKit.h>
//导入RCTComponent  头文件
#import "RCTComponent.h"

@interface XSYCustomerMapView : UIView

//在这里定义一个存储 RN 传递过来时间的Block属性
@property (nonatomic, copy) RCTBubblingEventBlock onBtnClick;

@end

原生视图管理类处理

//
//  RCTCustomerMapViewManager.m
//  XSYMapView
//
//  Created by bear on 16/9/12.
//  Copyright © 2016年 Facebook. All rights reserved.
//

#import "RCTXSYCustomerMapViewManager.h"

@implementation RCTXSYCustomerMapViewManager

//导出视图的宏定义
RCT_EXPORT_MODULE()

//导出视图属性的宏定义
RCT_EXPORT_VIEW_PROPERTY(onBtnClick, RCTBubblingEventBlock)

- (UIView *)view
{
  return [[XSYCustomerMapView alloc] init];
}


@end

在React Native 中这么调用

//一般在render  方法中

<RCTXSYCustomerMapView {...this.props} onBtnClick={this.props.onBtnClick} />
阅读全文
none

React-Native 常见错误及其原因

1.invariant violation:expected a component class,got[object object]

创建自定义组件首字母要大写,否则会报错.

 2.Module 0 is not a registered callable module.

将gradle升级成最新版本(cd Android 进入android目录执行:sudo ./gradlew clean) 或者通过android studio工具升级.

 3.android.view.WindowManager$BadTokenException: Unable to add window -- token null is not valid; is your activity running?

该错误属于安卓Native的错误,如果引用的Activity不存在或者已经销毁,再次引用就会报该错误,如果是React Native 调用原生控件的话,创建控件需要引用:getCurrentActivity()

 4.android.app.Application cannot be cast to com.facebook.React.ReactApplication

需要将创建的MainApplication在AndroidManifest.xml配置好.

 5.Element type is invalid: expected a string (for built-in components) or a class/function but got: object

发生原生一般是你引用了无效的组件,如果组件确实正确,看下引用的组件是否正常导出:(export defalut)

6.react native  undefined is not an object (evaluating this....

发生该错误的一般是忘记bind(this),只要回调函数中需要用到this的,一般都需要bind.

7.react native - expected a component class, got [object Object]

该错误可能是你引用了小写的组件,组件首字母一定要大写,比如<login/>应该写成<Login/>

阅读全文
none

React-Native 环境搭建

下面将以Mac OS为例:

  • 安装Homebrew   mac  软件包管理工具
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
  • 如果遇到  /user/local不可读写则执行
sudo chown -R `whoami` /usr/local
  • 使用Homebrew 来安装  Node.js
brew install node
  • 接下来 安装react native 命令行工具   react-native-cli
npm install -g react-native-cli
  • 安装Xcode  及其命令行工具  一般xcode安装成功  xcode  

Command Line Tools   便自动安装成功

推荐安装watchman

Watchman是由Facebook提供的监视文件系统变更的工具。安装此工具可以提高开发时的性能(packager可以快速捕捉文件的变化从而实现实时刷新)。</span>

brew install watchman

Flow

Flow是一个静态的JS类型检查工具。译注:你在很多示例中看到的奇奇怪怪的冒号问号,以及方法参数中像类型一样的写法,都是属于这个flow工具的语法。这一语法并不属于ES标准,只是Facebook自家的代码规范。所以新手可以直接跳过(即不需要安装这一工具,也不建议去费力学习flow相关语法)。

brew install flow

执行以下命令  测试创建一个app  并进入目录执行

react-native init AwesomeProject
cd AwesomeProject
react-native run-iso
阅读全文
none