前言：

本人目前在一家智能燈的企業(yè)做RN的開(kāi)發(fā)。最近測(cè)試提交了好幾BUG，莫名其妙的怎么會(huì)這么多BUG。
我先點(diǎn)開(kāi)郵件仔細(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)過(guò)我的測(cè)試后都是這一個(gè)問(wèn)題。來(lái)解決問(wèn)題。google發(fā)現(xiàn)有人遇到了這個(gè)問(wèn)題 請(qǐng)戳這里
。這個(gè)問(wèn)題的是過(guò)快的切換Modal的狀態(tài)，導(dǎo)致程序奔潰。這怎么辦呢？
既然是過(guò)快的切換，那么我加個(gè)延遲會(huì)如何呢類似這樣：

  setTimeout(()=>{
      this.setState({
          isOpen:true
      })
  },100)

這樣就不會(huì)出問(wèn)題了吧，我先測(cè)試高配的手機(jī)，沒(méi)有問(wèn)題！當(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

那么看來(lái)這種延遲的解決方案也是不行的，然而我們的業(yè)務(wù)需求，大概率的發(fā)生這種快速的Modal的狀態(tài)切換。
那么官方帶的Modal是不能用了，我們開(kāi)始尋求第三方的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沒(méi)有問(wèn)題。果斷全部替換為新的Modal