Expo React-Native在Mapview中添加标记会导致App忽略进一步的输入？

Question

我正在使用Expo构建一个使用Expo的应用程序，该应用程序使用Expo MapView组件并具有一个按钮，该按钮允许用户将作业添加到Firebase中，并在应用程序关闭后可以对其进行访问。作业创建功能将推入一个词典，其中包含所有MapView.Markers，它们代表发布的作业，在点击时会弹出相应的模态。

问题是，每当我推送到地图所呈现的字典时，它都不会发布任务；如果发布后不久我没有轻按屏幕，则除了MapView之外，应用程序都会锁定，但即使如此，标记也不会轻按一下即可调出模态。

这是不是与状态子级对应的mapview如何呈现的问题？即使我强制刷新，它也不会仅在硬重置应用程序并重新打开时才将作业发布在地图上

任何帮助深表感谢！

PS：我只是尝试在Expo Emulator上而不是在源代码的编译版本上这样做

import { Button, Paragraph, TextInput, FAB } from 'react-native-paper';
import Expo, { MapView, WebBrowser } from 'expo';
import { MonoText } from '../components/StyledText';
import * as firebase from 'firebase';
import Geocoder from 'react-native-geocoding';

  var markerL = [];
  const neoMarker = (lat, long, tit, desc, valu, acc) => {
      x = x + 1;

      firebase.database().ref("map/" + tit).once("value").then(function(snapshot) {
        this.setState({accept: snapshot.child("accepted").val()})
      }.bind(this))

      return(<MapView.Marker
            coordinate={{latitude: lat,
                longitude: long}}
            title={tit}
            key={x}
            identifier={tit}
            ref={ (ref) => markerL[tit] = ref}
            description={desc}
            onPress={() => {handleVisible(tit, desc, lat, long, valu)}}>
            <FAB
          small
          icon={acc ? "gavel" : "add"}
          onPress={() => { handleVisible(tit, desc, lat, long, valu)}}/>
            </MapView.Marker>)
    };

  firebase.database().ref("map/").once("value").then(function(snapshot) {
     snapshot.forEach(function(childSnapshot) {
        markerL.push(neoMarker(childSnapshot.child("latitude").val(), childSnapshot.child("longitude").val(), childSnapshot.child("jobDesc").val(),  childSnapshot.child("jobTitle").val(), childSnapshot.child("value").val(), childSnapshot.child("accepted").val()))
      	console.log(markerL)
      })
    })
  }

    const writeMapData = (coordinate, desc, latit, longit, valu) => {

        var acc = false;
      firebase.database().ref("map/" +  coordinate).set({
        jobTitle: coordinate,
        jobDesc: desc,
        latitude: latit,
        longitude: longit,
        value: valu,
        accepted: acc,
        contact: firebase.auth().currentUser.email,
      }).then(response => {
      	markerL.push(neoMarker(latit, longit, desc,  coordinate, valu, acc));
      	console.log(markerL);
      });
      	
    }

         const geoLoc = (jT, Addr) => {
          Geocoder.from(Addr)
          .then(json => {
                    var rLoc = json.results[0].geometry.location;
                    writeMapData(jT, this.state.jobDesc, rLoc.lat, rLoc.lng, this.state.value);
                }).catch(error => console.warn(error));
          this.setState({forceRefresh: Math.floor(Math.random() * 100), visibleA: false});
        }

  render() {
return (<View style={styles.container}>
   <MapView
   		key={this.state.forceRefresh}
        style={{ flex: 1, bottom: 0 }}
        initialRegion={{latitude: 40.71455,
          longitude: -74.00712,
          latitudeDelta: 0.0922,
          longitudeDelta: 0.0421}}>
      	{markerL}
  	</MapView>

 <Modal  animationType="slide"
      transparent={false}
      visible={this.state.visibleB}
      onRequestClose={() => 
        {this.setState({visibleB: false})}
      }>
      <Image source={require('../assets/images/creditB.png')}
              style={{height: 100, width: 100, right: -60}}
            />
        <TextInput
        label='Card No.'
        onChangeText={card_no  => {this.setState({ card_no })}}
        style={{bottom: 35}}
        />

        <TextInput
        label='Cardholder'
        onChangeText={card_holder  => {this.setState({ card_holder })}}
        style={{bottom: 35}}
        />

        <TextInput
        label='Billing Addr.'
        onChangeText={bill_addr  => {this.setState({ bill_addr })}}
        style={{bottom: 35}}
        />

        <TextInput
        label='Exp. Month'
        onChangeText={expMonth => {this.setState({ expMonth })}}
        style={{bottom: 35, left: 1}}
        />

       <TextInput
        label='Exp. Year'
        onChangeText={expYear => {this.setState({ expYear })}}
        style={{bottom: 35, right: 1}}
      />
       <TextInput
        label='CVC'
        onChangeText={cv => {this.setState({ cv })}}
        style={{bottom: 25}}
      />
      <TextInput
        label='ZIP'
        onChangeText={zip => {this.setState({ zip })}}
        style={{bottom: 20}}
      />

      {this.state.card_no, this.state.card_holder, this.state.bill_addr, this.state.expMonth, this.state.expYear, this.state.cv, this.state.zip}
      <Button raised theme={{ roundness: 3, backgroundColor: '#000FF5' }} style={{bottom: 15, marginLeft: 'auto', marginRight: 'auto', left: 0, right:0}} onPress={() => {handlePaymentMethod(this.state.jobTitle, /*getNonce(),*/ this.state.value)}}>
            <Image source={require('../assets/images/credit.png')} style={{height: 75, width: 75}}/>Confirm Payment
      </Button>  

      <Button raised theme={{ roundness: 3, backgroundColor: '#000FF5' }} style={{bottom: 5, marginLeft: 'auto', marginRight: 'auto', left: 0, right:0}} onPress={() => {this.setState({visibleB: false})}}>
            <Image source={require('../assets/images/x.png')} style={{height: 75, width: 75}}/> Cancel Payment 
      </Button> 
      </Modal>

  <Searchbar
        placeholder="Search by Job Type"
        icon={require('../assets/images/searchOptions.png')}
        style={{bottom: 585, marginLeft: 'auto', marginRight: 'auto'}} 
        onIconPress={() => {handleSearch()}}
        value={this.state.firstQuery}
      />

      <Button raised theme={{ roundness: 3, backgroundColor: '#000FF5' }} style={{position: 'absolute', bottom: 5, marginLeft: 'auto', marginRight: 'auto', left: 0, right:0}} onPress={() => this.setState({visibleA: true})}>
            <Image source={require('../assets/images/handshake.png')} style={{height: 75, width: 75}}/>Add Job
        </Button>  

        <Modal  animationType="slide"
          transparent={false}
          visible={this.state.visibleA}
          onRequestClose={() => {
            this.setState({visibleA: false});
          }}>
          <Text style={styles.titleText}> Register</Text>

        <TextInput
        label='Job'
        onChangeText={(jobTitle) => this.setState({jobTitle})}
        style={{bottom: 5}}
      />
      <HelperText
          type="error"
          visible={this.state.jobTitle ? !this.state.jobTitle.includes('-') : ""}
        >
          Job Title Invalid! add hyphen between title and description
        </HelperText>

      <TextInput
        label='Details'
        onChangeText={(jobDesc) => this.setState({jobDesc})}
        style={{bottom: 30}}
      />

      <TextInput
        label='Location'
        onChangeText={(Loc) => this.setState({Loc})}
        style={{bottom: 50}}
      />
      
      <Text style={{bottom: 30}}>{this.state.value.toString()}</Text>
        

      <Slider
    value={this.state.value}
    maximumValue={1000}
    onValueChange={(value) => this.setState({value})} />
    <Text>Value: ${this.state.value}</Text>

       <Button raised theme={{ roundness: 3, backgroundColor: '#000FF5' }} style={{bottom: 15, marginLeft: 'auto', marginRight: 'auto', left: 0, right:0}} onPress={() => geoLoc(this.state.jobTitle, this.state.Loc)}>
            <Image source={require('../assets/images/handshake.png')} style={{height: 75, width: 75}}/> Add Job
        </Button>  

        <Button raised theme={{ roundness: 3, backgroundColor: '#000FF5' }} style={{bottom: 5, marginLeft: 'auto', marginRight: 'auto', left: 0, right:0}} onPress={() => {this.setState({visibleA: false})}}>
            <Image source={require('../assets/images/x.png')} style={{height: 75, width: 75}}/> Cancel Job registration 
      </Button> 

      </Modal>  
</View>
)
}