1.onResponderMove有時(shí)候返回值不對的問題
在做進(jìn)度條的時(shí)候虫腋，處理onResponderMove的事件的時(shí)候靴寂，有時(shí)候發(fā)現(xiàn)進(jìn)度條在拖動的時(shí)候跳動膀藐，最后發(fā)現(xiàn)原因是onResponderMove返回的event值有些問題亮靴。
這是布局
<View style={[styles.container , this.props.style]}
pointerEvents = "box-only"
onStartShouldSetResponder = {()=>{return true}}
onMoveShouldSetResponder = {()=>{return true}}
onResponderStart = {this._onResponderStart.bind(this)}
onResponderMove = {this._onResponderMove.bind(this)}
onResponderRelease = {this._onResponderRelease.bind(this)}
onLayout = {this._onLayout.bind(this)}>
<View style = {[ styles.progressBackground, { height:progressHeight }]}/>
<View style = {[styles.secondProgress, { marginTop : -progressHeight, height:progressHeight , width:this.state.secondProgress}]}/>
<View style = {[ styles.firstProgress, { marginTop : -progressHeight,height:progressHeight , width:firstProgressWidth}]}/>
<View style = {[styles.slider , {position:"absolute" , left:firstProgressWidth}]}/>
最后發(fā)現(xiàn)是因?yàn)関iew堆疊在一塊，觸摸的時(shí)候事件返回的位置信息有點(diǎn)問題缘圈。最好處理就是事件只讓最外面View處理就行路。
最后查看資料有一個(gè)叫pointerEvent的屬性袜蚕，是用來處理堆疊在一起的View事件的屬性准验。看路文檔之后最后選擇“box-only”完美解決
pointerEvent官方介紹
pointerEvent參考
2.onResponderMove的參數(shù)event.nativeEvent.locationX不會更新的問題
這是React Native的一個(gè)bug廷没，正在Android中出現(xiàn)糊饱，IOS沒有問題
參見issue
在最新的版本中已經(jīng)修復(fù)了，但是在低版本中有問題
還好event.nativeEvent.pageX這個(gè)值更新了颠黎，就用這個(gè)值來解決問題就行了
解決辦法如下：
var x = event.nativeEvent.locationX;
if (Platform.OS === "android"){
x = event.nativeEvent.pageX - this.layout.x
}
在0.44.3中是有問題的另锋，最新版本修復(fù)此bug
3.Component的生命周期控制
我本人是做原生開發(fā)的滞项，遇到這個(gè)問題是做視頻全屏切換需求的時(shí)候，要是原生開發(fā)其實(shí)就很簡單了夭坪，直接將VideoView放到Activity的根View當(dāng)中就可以了文判，這樣切換的時(shí)候，VideoView不會被銷毀在重新創(chuàng)建室梅。天真的我在ReactNative當(dāng)中也想這也搞戏仓，最后發(fā)現(xiàn)你根本控制不了Component的生命周期。
假設(shè)VideoComponent對應(yīng)的原生的VideoViewMananger亡鼠。那么在VideoComponent掛載的時(shí)候會調(diào)用VideoViewManager的createNewInstance來創(chuàng)建新的實(shí)例赏殃。在卸載的時(shí)候也會調(diào)用onDropViewInstance。
所以在RN當(dāng)中间涵，View組件的節(jié)點(diǎn)與節(jié)點(diǎn)之間的層級一般是不能改變的仁热。并不能簡單的像在原生開發(fā)當(dāng)中，將一個(gè)View移除勾哩，在添加到另一個(gè)ViewGroup當(dāng)中抗蠢。
4.React Native 沒有遵守Android的View的測量，布局思劳，繪制迅矛，這個(gè)流程
在RN自定義View組件的時(shí)候，在自定義的View組件中掉用requestLayout不會引發(fā)重新布局的潜叛。
原因：在ReactRootView當(dāng)中的onLayout沒事實(shí)現(xiàn)
@Override
protected void onLayout(boolean changed, int left, int top, int right, int bottom) {
// No-op since UIManagerModule handles actually laying out children.
}
所以布局到ReactRootView就停止了秽褒，不會繼續(xù)傳遞下去。
這會有什么問題呢钠导？會讓你在自定義一些復(fù)雜組件的時(shí)候震嫉，內(nèi)部的View如果需要重新布局，可能就很麻煩牡属。
假如票堵，我們要做一個(gè)VideoView的組件，VideoView可能是一個(gè)RelativeLayout逮栅，里面放一個(gè)SurfaceView悴势。一般在mediaPlayer回調(diào)視頻寬高的方法的時(shí)候需要對SurfaceView重新計(jì)算大小和布局，這是就要發(fā)送一個(gè)requestLayout請求措伐。
在RN下一般沒反應(yīng)的特纤，肯定不會重新布局。而RN的源碼中給了一個(gè)臨時(shí)方案
private final Runnable measureAndLayout = new Runnable() {
@Override
public void run() {
measure(
MeasureSpec.makeMeasureSpec(getWidth(), MeasureSpec.EXACTLY),
MeasureSpec.makeMeasureSpec(getHeight(), MeasureSpec.EXACTLY));
layout(getLeft(), getTop(), getRight(), getBottom());
}
};
@Override
public void requestLayout() {
super.requestLayout();
// The spinner relies on a measure + layout pass happening after it calls requestLayout().
// Without this, the widget never actually changes the selection and doesn't call the
// appropriate listeners. Since we override onLayout in our ViewGroups, a layout pass never
// happens after a call to requestLayout, so we simulate one here.
post(measureAndLayout);
}
這段代碼是在ReactPicker這個(gè)類當(dāng)中復(fù)制過來的侥加。
5. React Native 的View 的設(shè)計(jì)
6.在View組件中onDraw函數(shù)
在自定義組件中調(diào)用invalidate()會引發(fā)視圖重繪捧存，RN的繪制也有很大問題。
7. Modal這個(gè)類在Android上最好不要用
Modal根本沒有考慮上面有對話框的問題，如果Modal覆蓋有對話框昔穴，從后臺切換到前臺镰官，Modal會覆蓋對話框。
而且Modal的在前后胎切換的時(shí)候體驗(yàn)很不好吗货，會重復(fù)創(chuàng)建泳唠。
8.react native send command to a non-existing view
在JS對接Android原生View的時(shí)候出現(xiàn)的。
JS:
<View>
<TALVideoView
dataSource = {this.props.dataSource}
onPreparedEvent = {()=>this.start()}
{ ... this.props}
/>
</View>
Java：
@Nullable
@Override
public Map<String, Object> getExportedCustomDirectEventTypeConstants() {
Map<String, Object> map = new HashMap<>();
map.put("WL_onPreparedEvent" , MapBuilder.of("registrationName", "onPreparedEvent"));
return map;
}
由于事件不會冒泡傳宙搬，所以只看最外層的View沒有onPreparedEvent就報(bào)錯(cuò)了笨腥。
方案：去掉最外的View或者用getExportedCustomBubblingEventTypeConstants
9. RN和Kotlin寫的模塊對接的時(shí)候編譯的bug
用Kotlin寫的模塊，對接RN的時(shí)候勇垛，模塊的名字正確沒有重復(fù)脖母，但是在JS端總是獲取不到對象。
const module = NativeModules.xxxxx; //總是返回null
可能是Kotlin編譯的問題窥摄，clean一下項(xiàng)目在運(yùn)行就可以了
