将 flex 与 React Native 地图一起使用？

Question

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

我想这样分配屏幕

map - flex 3

bottom layout (eg taxi details) - flex 1

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

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

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

Answer 1

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

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

Answer 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
  }

Answer 3

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

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

将 flex 与 React Native 地图一起使用？

Using flex with react native maps?

flexbox

react-native

react-native-maps