前言:
本人目前在一家智能灯的企业做RN的开发。最近测试提交了好几BUG,莫名其妙的怎么会这么多BUG。
我先点开邮件仔细看了一下,发现好几个BUG相同的点都是类似压力测试,然后App莫名的就崩掉了。
那先复现一下BUG,再想办法解决!!!
正文:
先打个测试包BUG复现一下看看报的什么错**
java.lang.NullPointerException: Attempt to invoke virtual method 'void com.facebook.react.uimanager.ReactShadowNode.setStyleWidth(float)' on a null object reference
好吧,好像经过我的测试后都是这一个问题。来解决问题。google发现有人遇到了这个问题 请戳这里
。这个问题的是过快的切换Modal的状态,导致程序奔溃。这怎么办呢?
既然是过快的切换,那么我加个延迟会如何呢类似这样:
setTimeout(()=>{
this.setState({
isOpen:true
})
},100)
这样就不会出问题了吧,我先测试高配的手机,没有问题!当我拿起配置低的手机的时候发现多次测试后还是会有几率奔溃,
测试的代码是这样的:
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 (
sadasdsa
)
}
}
const styles = StyleSheet.create({
modal: {
justifyContent: 'center',
alignItems: 'center'
},
modal1: {
height: 230,
backgroundColor: "#3B5998",
zIndex:9999
},
})
export default ModalText
那么看来这种延迟的解决方案也是不行的,然而我们的业务需求,大概率的发生这种快速的Modal的状态切换。
那么官方带的Modal是不能用了,我们开始寻求第三方的Modal
发现两个Modal可以选择的,继续以上面一段代码测试这两个Modal。
react-native-modal
react-native-root-modal
第一个Modal会出现数据和视图变现不一致的Bug,最终测试react-native-root-modal没有问题。果断全部替换为新的Modal