RN的Modal的问题的解决方案

前言：

本人目前在一家智能灯的企业做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 (
            <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

那么看来这种延迟的解决方案也是不行的，然而我们的业务需求，大概率的发生这种快速的Modal的状态切换。
那么官方带的Modal是不能用了，我们开始寻求第三方的Modal

发现两个Modal可以选择的,继续以上面一段代码测试这两个Modal。

react-native-modal
react-native-root-modal

第一个Modal会出现数据和视图变现不一致的Bug，最终测试react-native-root-modal没有问题。果断全部替换为新的Modal