前言：
本人目前在一家智能燈的企業(yè)做RN的開發(fā)。最近測(cè)試提交了好幾BUG，莫名其妙的怎么會(huì)這么多BUG。
我先點(diǎn)開郵件仔細(xì)看了一下，發(fā)現(xiàn)好幾個(gè)BUG相同的點(diǎn)都是類似壓力測(cè)試，然后App莫名的就崩掉了。
那先復(fù)現(xiàn)一下BUG,再想辦法解決！！！
正文:
先打個(gè)測(cè)試包BUG復(fù)現(xiàn)一下看看報(bào)的什么錯(cuò)**
java.lang.NullPointerException: Attempt to invoke virtual method 'void com.facebook.react.uimanager.ReactShadowNode.setStyleWidth(float)' on a null object reference
好吧，好像經(jīng)過我的測(cè)試后都是這一個(gè)問題。來解決問題。google發(fā)現(xiàn)有人遇到了這個(gè)問題 請(qǐng)戳這里
。這個(gè)問題的是過快的切換Modal的狀態(tài)，導(dǎo)致程序奔潰。這怎么辦呢？
既然是過快的切換，那么我加個(gè)延遲會(huì)如何呢類似這樣：
setTimeout(()=>{
this.setState({
isOpen:true
})
},100)
這樣就不會(huì)出問題了吧，我先測(cè)試高配的手機(jī)，沒有問題！當(dāng)我拿起配置低的手機(jī)的時(shí)候發(fā)現(xiàn)多次測(cè)試后還是會(huì)有幾率奔潰，
測(cè)試的代碼是這樣的：
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)兩個(gè)Modal可以選擇的,繼續(xù)以上面一段代碼測(cè)試這兩個(gè)Modal。
react-native-modal
react-native-root-modal
第一個(gè)Modal會(huì)出現(xiàn)數(shù)據(jù)和視圖變現(xiàn)不一致的Bug，最終測(cè)試react-native-root-modal沒有問題。果斷全部替換為新的Modal
