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
  }

将flex与react native映射一起使用？

2 个答案: