使用flex与本地地图做出反应？

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
  }