将 flex 与反应原生地图一起使用？答案

【问题标题】：Using flex with react native maps?将 flex 与反应原生地图一起使用？
【发布时间】：2019-09-11 07:43:54
【问题描述】：

absoluteFillObject这是让地图工作的唯一方法吗？

我想这样分配屏幕

map - flex 3

bottom layout (eg taxi details) - flex 1

但我无法让地图与 flex（可变大小）一起使用而不会收到关于地图大小不能为 0 的错误

重要的是地图不要使用整个屏幕，因为地图的中心不是屏幕的中心，因为我们有一个使用部分屏幕的底部布局

作为一种解决方法，我使用 marginBottom 来避免底部布局高度，但这样我必须为底部布局提供固定高度，并且我失去了灵活尺寸

【问题讨论】：

标签： react-native flexbox react-native-maps

【解决方案1】：

Nirmalsinh 的解决方案有效，但我建议将地图视图包装在 flex 容器中，例如：

<View style={{flex: 1}}>
  <View style={{flex: 1}}>
    <MapView height: '100%'}}/>
  </View>
  </OtherComponent>
</View>

【讨论】：

【解决方案2】：

这对我有用...

<View style={styles.container}>
   <MapView
     style={styles.map}
    />         
</View>

以及样式，

 container: {
    ...StyleSheet.absoluteFillObject,
    height: 540, // you can customize this
    width: 400,  // you can customize this
    alignItems: "center"
  },
  map: {
   ...StyleSheet.absoluteFillObject
  }

【讨论】：

【解决方案3】：

           <View style={{width:'100%', height:'100%'}}>
                <Map style={{width:'100%', height:'75%'}}></Map>
                <OtherComponent style={{width:'100%', height:'25%'}}></OtherComponent>
            </View>

我在使用 Map 和 flex 组合时遇到了同样的问题。我只是给出百分比的高度及其对我的工作。您可以尝试使用上面的代码来解决您的问题。

【讨论】：