浮动在与Flexbox的本机反应中

Question

我想将按钮浮动到地图的右侧。不知何故，它不起作用。有人可以帮忙吗？

const styles = StyleSheet.create({
  mapContainer: {
    flex: 1,
  },
  map: {
    flexDirection: 'row',
    flex: 1,
    borderRadius: 4,
    borderWidth: 2,
    borderColor: 'purple',
    width,
    height,
  },
  button: {
    marginLeft: 'auto',
    borderRadius: 4,
    borderWidth: 2,
    borderColor: 'red',
  }
})

Answer 1

您可以使用这样的绝对位置：

  container: {
    position: "absolute",
    width: YOUR_WIDTH,
    height: YOUR_HEIGHT,
    right: 20,
  }

Answer 2

请尝试为按钮使用“ alignSelf”布局道具，如下所示：

button: {
   alignSelf: 'flex-end',
   borderRadius: 4,
   borderWidth: 2,
   borderColor: 'red'
}