1哪审、小米手機上跑RN，先去把開發(fā)者選項中的MIUI優(yōu)化選項關(guān)閉掉虑瀑；
2湿滓、在調(diào)試的時候，一enable remote JS debug就閃退舌狗，這個根本原因目前不知道是啥叽奥，控制臺android和IOS也是輸出了不一樣的日志，到官網(wǎng)的issue上也沒發(fā)現(xiàn)實質(zhì)的解決方式痛侍，后來更新了下rn版本朝氓，重新npm install，又好了主届，這個要持續(xù)跟進(jìn)赵哲；
3、react navigation reset的問題
在使用react navigation reset的時候岂膳，會導(dǎo)致component的生命周期執(zhí)行多次誓竿，經(jīng)過不斷的排查，最終發(fā)現(xiàn)問題是在setparams上面谈截，所以筷屡，如果在A頁面要reset到B頁面，而B頁面又要進(jìn)行setparam簸喂，那么毙死，一定要進(jìn)行適當(dāng)?shù)难訒r，否則喻鳄，A的生命周期會執(zhí)行多次扼倘。
let that = this;
this.timer = setTimeout(
() => {
console.log("111111111111111111111111111111111111111")
that.props.navigation.setParams({
isCurrentTasks: that.state.isCurrentTasks,
navigatePress: that.loadData,
});
that.timer && clearTimeout(that.timer);
},300
);
4、android建立原生組件除呵，供reactnative調(diào)用
4.1）定義一個Module再菊，集成ReactContextBaseJavaModule：
package com.study03.custommodules;
import android.widget.Toast;
import com.facebook.react.bridge.Arguments;
import com.facebook.react.bridge.Callback;
import com.facebook.react.bridge.Promise;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.bridge.ReactContext;
import com.facebook.react.bridge.ReactContextBaseJavaModule;
import com.facebook.react.bridge.ReactMethod;
import com.facebook.react.bridge.WritableMap;
import com.facebook.react.module.annotations.ReactModule;
import com.facebook.react.modules.core.DeviceEventManagerModule;
import com.facebook.react.modules.storage.AsyncStorageModule;
import com.facebook.react.uimanager.PixelUtil;
import java.util.Map;
/**
* @author LuoZheng
* @date 2018/1/15 10:11
*/
@ReactModule(name = HelloModule.NAME)
public class HelloModule extends ReactContextBaseJavaModule {
public static final String NAME = "HelloModule";
private ReactContext context;
public HelloModule(ReactApplicationContext reactContext) {
super(reactContext);
this.context = reactContext;
notifyReactNative();
}
/**
* 無需ReactNative調(diào)用，直接發(fā)送信息給ReactNative
* @param eventName
* @param params
*/
public void sendEvent(String eventName, WritableMap params) {
context.getJSModule(DeviceEventManagerModule.RCTDeviceEventEmitter.class).emit(eventName,params);
}
private void notifyReactNative(){
new Thread(new Runnable() {
@Override
public void run() {
try {
Thread.sleep(10 * 1000);
} catch (InterruptedException e) {
e.printStackTrace();
}
WritableMap et= Arguments.createMap();
et.putString("eventParams", "Hello Event");
sendEvent("HelloEvent",et);
}
}).start();
}
/**
* 這個是在reactnative引用的名字：
* @return
*/
@Override
public String getName() {
return NAME;
}
@Override
public Map<String, Object> getConstants() {
return super.getConstants();
}
/**
* 參數(shù)類型Java -> JavaScript
* Boolean -> Bool
* Integer -> Number
* Double -> Number
* Float -> Number
* String -> String
* Callback -> function
* ReadableMap -> Object
* ReadableArray -> Array
* @param message
*/
@ReactMethod
public void hello(String message){
Toast.makeText(getReactApplicationContext(),message,Toast.LENGTH_LONG).show();
}
/**
* 回調(diào)方式把結(jié)果返給react native
* @param message
* @param callback
*/
@ReactMethod
public void callback(final String message,final Callback callback){
new Thread(new Runnable() {
@Override
public void run() {
try {
Thread.sleep(3000);
} catch (InterruptedException e) {
e.printStackTrace();
}
callback.invoke(message + ",Hello Callback!");
}
}).start();
}
/**
* Promise 方式把結(jié)果返回給React native
* @param message
* @param promise
*/
@ReactMethod
public void promise(final String message , final Promise promise){
WritableMap map = Arguments.createMap();
map.putString("result", message + ",Hello Promise");
promise.resolve(map);
// new Thread(new Runnable() {
// @Override
// public void run() {
// try {
// Thread.sleep(5000);
// } catch (InterruptedException e) {
// e.printStackTrace();
// }
// WritableMap map = Arguments.createMap();
// map.putString("result", message + ",Hello Promise");
// promise.resolve(map);
// }
// }).start();
}
}
4.2) 創(chuàng)建一個ReactPackage：
package com.study03.custommodules;
import com.facebook.react.ReactPackage;
import com.facebook.react.bridge.NativeModule;
import com.facebook.react.bridge.ReactApplicationContext;
import com.facebook.react.uimanager.ViewManager;
import java.util.ArrayList;
import java.util.Collections;
import java.util.List;
/**
* $Desc$
*
* @author LuoZheng
* @date 2018/1/15 10:23
*/
public class HelloPackage implements ReactPackage {
/**
* 這個是用來返回特定的module
* @param reactContext
* @return
*/
@Override
public List<NativeModule> createNativeModules(ReactApplicationContext reactContext) {
List<NativeModule> nativeModules = new ArrayList<>();
nativeModules.add(new HelloModule(reactContext));
return nativeModules;
}
/**
* 這個用來指定特定module的一些view屬性配置信息
* @param reactContext
* @return
*/
@Override
public List<ViewManager> createViewManagers(ReactApplicationContext reactContext) {
return Collections.emptyList();
}
}
4.3) 在ReactNativeHost中注冊package：
@Override
protected List<ReactPackage> getPackages() {
return Arrays.asList(
new MainReactPackage(),
new HelloPackage()
);
}
4.4) module 導(dǎo)出：
import React, { Component } from 'react'
import { NativeModules } from 'react-native'
module.exports = NativeModules.HelloModule;
4.5)使用：
/**
* Sample React Native App
* https://github.com/facebook/react-native
* @flow
*/
import React, { Component } from 'react';
import {
Platform,
StyleSheet,
Text,
View,
DeviceEventEmitter,
} from 'react-native';
import HelloModule from './Hello'
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',
});
export default class App extends Component {
componentDidMount() {
HelloModule.hello("Hello React Native World !");
// Callback 回調(diào)方式獲取Native結(jié)果
HelloModule.callback("你好",
(message) => {
console.log("@@@@@@@@@@@@@ 111:" + message);
}
);
// Native 主動向ReactNative發(fā)送消息
DeviceEventEmitter.addListener("HelloEvent", function (event) {
console.log("@@@@@@@@@@@@@ 222:%O", event)
});
}
/**
* async 標(biāo)識promiseTest是一個異步方法
*/
async promiseTest() {
// await 表示要等到promise方法執(zhí)行結(jié)束之后颜曾，才會往后執(zhí)行
// Promise 方式獲取Native結(jié)果
let { result } = await HelloModule.promise("你好");
console.log("@@@@@@@@@@@@@ 333:" + result);
}
render() {
return (
<View style={styles.container}>
<Text style={styles.welcome}>
Welcome to React Native!
</Text>
<Text style={styles.instructions}>
To get started, edit App.js
</Text>
<Text
style={styles.instructions}
onPress={this.promiseTest.bind(this)}>
{instructions}
</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
backgroundColor: '#F5FCFF',
},
welcome: {
fontSize: 20,
textAlign: 'center',
margin: 10,
},
instructions: {
textAlign: 'center',
color: '#333333',
marginBottom: 5,
},
});
