旋转时React Native地图不会改变宽度

Question

我已经使用react native准确地实现了Google地图。当我以纵向模式加载地图时，它看起来很完美。然后，当我将手机旋转到横向模式时，尽管我已将其编码为响应性工作，但地图的宽度仍然相同，并且不会根据屏幕宽度更改宽度。

但是问题是，当我在横向模式下将地图屏幕加载到应用程序中时，地图的宽度完全适合宽度增加的屏幕。但是，当我将手机旋转到纵向模式时，“地图”并没有减小其宽度，并且我无法看到地图的一半，如下图所示。

看起来地图不会实时更改其宽度。必须再次加载以更改宽度。

我的代码如下。

<View style={[styles.mapSubContainer, { width: this.state.width }]}>
    <MapView style={styles.mapStyle}
        initialRegion={{
            latitude: this.state.latitude,
            longitude: this.state.longitude,
            latitudeDelta: 0.1,
            longitudeDelta: 0.1,
        }}
        provider={PROVIDER_GOOGLE}
        onPress={this.onMapPress.bind(this)}
        showsUserLocation={true}
        followsUserLocation={true}
        showsMyLocationButton={true}
        showsCompass={true}
        showsTraffic={true}
        toolbarEnabled={true}
        onMapReady={() => this.setState({ width: width - 1 })}
    >
        <Marker draggable
            coordinate={{
                latitude: this.state.latitude,
                longitude: this.state.longitude,
            }}
            onDragEnd={(e) => this.setState({ x: e.nativeEvent.coordinate })}
        />
        <Circle
            center={{
                latitude: this.state.latitude,
                longitude: this.state.longitude,
            }}
            radius={this.state.radius}
            fillColor='rgba(253, 48, 4,0.5)'
            strokeColor='rgba(253, 48, 4,1)'
        />
    </MapView>
</View>

const styles = {
    mapSubContainer: {
        flex: 1,
        height: 350
    },
    mapStyle: {
        width: Dimensions.get('window').width - 30,
        height: 350
    }
}

任何解决方案将不胜感激。