前言：
本人目前在一家智能燈的企業(yè)做RN的開發(fā)易结。最近測試提交了好幾BUG，莫名其妙的怎么會這么多BUG。
我先點開郵件仔細(xì)看了一下款咖，發(fā)現(xiàn)好幾個BUG相同的點都是類似壓力測試，然后App莫名的就崩掉了奄喂。
那先復(fù)現(xiàn)一下BUG,再想辦法解決ｎ硌辍！跨新！
正文:
先打個測試包BUG復(fù)現(xiàn)一下看看報的什么錯**
java.lang.NullPointerException: Attempt to invoke virtual method 'void com.facebook.react.uimanager.ReactShadowNode.setStyleWidth(float)' on a null object reference
好吧富腊，好像經(jīng)過我的測試后都是這一個問題。來解決問題域帐。google發(fā)現(xiàn)有人遇到了這個問題 請戳這里
赘被。這個問題的是過快的切換Modal的狀態(tài)是整，導(dǎo)致程序奔潰。這怎么辦呢民假？
既然是過快的切換浮入，那么我加個延遲會如何呢類似這樣：
setTimeout(()=>{
this.setState({
isOpen:true
})
},100)
這樣就不會出問題了吧，我先測試高配的手機羊异，沒有問題事秀！當(dāng)我拿起配置低的手機的時候發(fā)現(xiàn)多次測試后還是會有幾率奔潰，
測試的代碼是這樣的：
import React, {Component, PropTypes} from 'react'
import {View,Text,StyleSheet,TouchableOpacity,Modal} from 'react-native';
//import Modal from 'react-native-modalbox';
class ModalText extends Component {
constructor (props) {
super(props)
this.state={
swipeToClose: false,
isOpen:true
}
this.SetTimeName = 0;
}
onClose() {
console.log('Modal just closed');
}
onOpen() {
console.log('Modal just openned');
}
onClosingState(state) {
console.log('the open/close of the swipeToClose just changed');
}
componentDidMount () {
let thiRef = this;
this.SetTimeName = setInterval(()=>{
if(this.state.swipeToClose==false){
this.setState({
swipeToClose:true
})
this.refs.modal1.open();
}else{
this.setState({
swipeToClose:false
})
this.refs.modal1.open();
}
},500)
setTimeout(()=>{
clearInterval(thiRef.SetTimeName)
},10000)
this.refs.modal1.open();
}
render () {
return (
<View style={{flex:1}}>
<View style={{width:300,height:300,backgroundColor:"red",zIndex:0}}>
<TouchableOpacity style={{flex:1}} onPress = {alert("dsds")}></TouchableOpacity>
</View>
<Modal
style={[styles.modal, styles.modal1]}
ref={"modal1"}
swipeToClose={this.state.swipeToClose}
onClosed={this.onClose}
onOpened={this.onOpen}
isOpen = {this.state.isOpen}
backdropPressToClose = {false}
onClosingState={this.onClosingState}>
<View style={{width:100,height:100,backgroundColor:'#FFF',zIndex:10000}}><Text>sadasdsa</Text></View>
</Modal>
</View>
)
}
}
const styles = StyleSheet.create({
modal: {
justifyContent: 'center',
alignItems: 'center'
},
modal1: {
height: 230,
backgroundColor: "#3B5998",
zIndex:9999
},
})
export default ModalText
那么看來這種延遲的解決方案也是不行的野舶，然而我們的業(yè)務(wù)需求易迹，大概率的發(fā)生這種快速的Modal的狀態(tài)切換。
那么官方帶的Modal是不能用了平道，我們開始尋求第三方的Modal
發(fā)現(xiàn)兩個Modal可以選擇的,繼續(xù)以上面一段代碼測試這兩個Modal睹欲。
react-native-modal
react-native-root-modal
第一個Modal會出現(xiàn)數(shù)據(jù)和視圖變現(xiàn)不一致的Bug，最終測試react-native-root-modal沒有問題一屋。果斷全部替換為新的Modal
