React Native 知识点

Learn wisdom by the follies of others.：要从别人的愚行中学到聪明。

1、FlexBox 布局

flex-direction
flex-wrap
flex-flow
justify-content
align-items
align-content

7、Animations

4、navigate

import {createStackNavigator, createBottomTabNavigator, createAppContainer} from 'react-navigation';

5、async/await syntax

当调用一个 async 函数时，会返回一个 Promise 对象。当这个 async 函数返回一个值时，Promise 的 resolve 方法会负责传递这个值；当 async 函数抛出异常时，Promise 的 reject 方法也会传递这个异常值。

async 函数中可能会有 await 表达式，这会使 async 函数暂停执行，等待 Promise 的结果出来，然后恢复async函数的执行并返回解析值（resolved）。

注意， await 关键字仅仅在 async function中有效。如果在 async function函数体外使用 await ，你只会得到一个语法错误（SyntaxError）。

function resolveAfter2Seconds() {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve('resolved');
    }, 2000);
  });
}

async function asyncCall() {
  console.log('calling');
  var result = await resolveAfter2Seconds();
  console.log(result);
  // expected output: 'resolved'
}

asyncCall();
//> "calling"
//> "resolved"

8、How Virtual DOM works？

屏幕快照 2019-03-19 上午10.25.20.png

2、js communicate with native

• RCTRootView initialProperties
• events（UIview event）
• native modules

Sending Events to JavaScript：The preferred way to do this is to subclass RCTEventEmitter, implement supportedEvents and call self sendEventWithName:

屏幕快照 2019-03-19 下午2.59.21.png

3、怎样导出native模块：how to build a native module？

• implements the RCTBridgeModule protocol
• include the RCT_EXPORT_MODULE() macro.
• expose methods by RCT_EXPORT_METHOD() macro

@interface CalendarManager : NSObject <RCTBridgeModule>

@end

@implementation CalendarManager

// To export a module named CalendarManager

RCT_EXPORT_MODULE();

// This would name the module AwesomeCalendarManager instead

// RCT_EXPORT_MODULE(AwesomeCalendarManager);

RCT_EXPORT_METHOD(addEvent:(NSString *)name location:(NSString *)location)

{

 RCTLogInfo(@"Pretending to create an event %@ at %@", name, location);

}

@end

from your JavaScript file you can call the method like this:

import {NativeModules} from 'react-native';

var CalendarManager = NativeModules.CalendarManager;

CalendarManager.addEvent('Birthday Party', '4 Privet Drive, Surrey');

Argument Types

RCT_EXPORT_METHOD supports all standard JSON object types, such as:

• string (NSString)
• number (NSInteger, float, double, CGFloat, NSNumber)
• boolean (BOOL, NSNumber)
• array (NSArray) of any types from this list
• object (NSDictionary) with string keys and values of any type from this list
• function (RCTResponseSenderBlock)

（Promises ：RCTPromiseResolveBlock / RCTPromiseRejectBlock）instead of （Callbacks ：RCTResponseSenderBlock）

6、导出一个UI视图

Exposing a view is simple:

• Subclass RCTViewManager to create a manager for your component.
• Add the RCT_EXPORT_MODULE() marker macro.
• Implement the -(UIView *)view method.

PROPERTY

RCT_EXPORT_VIEW_PROPERTY(zoomEnabled, BOOL)

// RNTMapManager.m

RCT_CUSTOM_VIEW_PROPERTY(region, MKCoordinateRegion, MKMapView)

{

[view setRegion:json ? [RCTConvert MKCoordinateRegion:json] : defaultView.region animated:YES];

}

Events

需要子类化，添加RCTBubblingEventBlock 属性的 callback

create a new subclass from MKMapView which we use for our View. We can then add a onRegionChange callback on this subclass:

@interface RNTMapView: MKMapView

@property (nonatomic, copy) RCTBubblingEventBlock onRegionChange;

@end