TouchableOpacity 在 React Native 的 mapview 中表现得很奇怪

Question

所以我的 MapView 中的 TouchableOpacities 有 2 个问题：

我的 touchableopacities 中的文本和图标超出了 touchableopacity，而在其他组件中则不会发生。
点击其中一个 touchableopacities 时什么都不做，它甚至不会改变 touchableopacity 的不透明度。

我还没有尝试过任何东西，除了修改我的状态及其行为方式和影响元素之外，但似乎没有任何错误。

这是我的状态：

this.state = {
      lats: this.tempVars.homelat,
      longs: this.tempVars.homelong,
      latDs: [0.04],
      longDs: [0.05],
      numStores: this.tempVars.numStores,
      StoreLats: this.tempVars.allLats,
      StoreLongs: this.tempVars.allLongs,
      StoreNames: this.tempVars.allNames,
      createMarker: false,
      placeMarker: false,
      removeAmarker: false,
}

辅助方法：

locChooser(){
    if(this.state.createMarker){
        console.log('Permanent Loc: '+JSON.stringify(this.MapLocs.permanentLoc));
        return (
                <Image style={{width: 65, height: 100, alignSelf: 'center', marginTop: Math.round(Dimensions.get('window').height/2)-150}} source={require('C:/Users/youse/FetcherApp/app/ping.png')}/>
        );
    }else if(this.state.placeMarker){
        return (<Marker coordinate={this.MapLocs.permanentLoc} onPress={() => {if(this.state.removeAmarker){this.setState({placeMarker: false, removeAmarker: false})}}} image={{uri: 'https://i.pinimg.com/originals/30/98/49/309849c5815761081926477e5e872f1e.png'}}/>);
    }else{
        return null;
    }
}

createHelpers(){
    var bigarr = new Array(3);
    if(this.state.createMarker){
        bigarr[0] = 
        <View style={{flexDirection: 'column', justifyContent: 'space-between'}}>
            <TouchableOpacity style={styles.DrawerOpener} onPress={() => this.props.navigation.dispatch(DrawerActions.openDrawer())}><Icon style={{marginTop: 20, marginLeft: 10}} name='reorder'/></TouchableOpacity>
            <TouchableOpacity style={[styles.next, {borderColor: '#000000', backgroundColor: '#000000', marginLeft: 10}]} onPress={() => {this.setState({createMarker: false, placeMarker: true})}}><Text style={{color: '#fff', fontSize: 15}}>Select this Location</Text></TouchableOpacity>
        </View>;
        return bigarr[0];
    }else{
        bigarr[1] =  <View key={0} style={{flexDirection: 'row', justifyContent: 'space-between'}}>
                        <TouchableOpacity style={styles.DrawerOpener} onPress={() => this.props.navigation.dispatch(DrawerActions.openDrawer())}><Icon style={{marginTop: 20, marginLeft: 10}} name='reorder'/></TouchableOpacity>
                        <TouchableOpacity style={[styles.next, {borderColor: '#000000', backgroundColor: '#000000', marginLeft: 10}]} onPress={() => {this.setState({createMarker: true})}}><Text style={{color: '#fff', fontSize: 15}}>Choose a location to order from</Text></TouchableOpacity>
                     </View>;
        bigarr[2] = 
            <View key={1}>
                <TouchableOpacity style={[styles.next, {borderColor: this.BtnColor(!this.state.placeMarker), backgroundColor: this.BtnColor(!this.state.placeMarker), marginLeft: 10}]} disabled={!this.state.placeMarker} onPress={() => {console.log('Placemarker: '+this.state.placeMarker+', removeMarker: '+this.state.removeAmarker+', createmarker: '+this.state.createMarker);this.setState({removeAmarker: true})}}><Text style={{color: '#fff', fontSize: 15}}>Remove a Marker</Text></TouchableOpacity>
            </View>;
        return [bigarr[1], bigarr[2]];
    }
 }

渲染方法：

render(){
    return (
        <MapView style={{flex: 2}} onRegionChange={this.__ChangeRegion} showsUserLocation={true} style={{position: 'absolute', left: 0, bottom: 0, right: 0, top: 0}} initialRegion={this.MapLocs.startloc}>
            <View>
                {this.createHelpers()}
            </View>    
            {this.locChooser()}
            {this.AllStores()}
            <Marker image={require('C:/Users/youse/FetcherApp/app/home.png')} coordinate={this.MapLocs.homeLoc}/>
            {this.displayCars(1)}
        </MapView>
    )
}

Answer 1

所以我想通了，看起来组件在 Mapview 中的行为非常异常，但是当我将它嵌套在具有屏幕尺寸的宽度和高度的 View 中，并将组件放在 Mapview 之外时，它们的行为又正常了，他们保持了他们的样式和格式。

TouchableOpacity 在 React Native 的 mapview 中表现得很奇怪

TouchableOpacity is acting weird inside mapview in React Native

ios

google-maps

user-interface

react-native-maps