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关键字仅仅在asyncfunction中有效。如果在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？
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:
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
