RNのModalの問題の解決策

3458 ワード

前言:


私は現在、スマートランプの企業でRNの開発をしています.最近テストでバグが何回も提出されましたが、どうしてこんなにバグが多いのか分かりません.私はまずメールを注文してよく見てみると、いくつかの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を求め始めました
2つのModalが選択できることが分かったので、上記のコードで2つのModalをテストし続けます.
react-native-modal
react-native-root-modal

最初のModalでは、データとビューが一致しないBugが発生し、最終的にreact-native-root-modalをテストしても問題ありません.思い切って全部新しいModalに置き換えて