Android的绝对位置

Question

我正在尝试创建一个外观类似于所附图片的屏幕。我使用的样式代码仅适用于 iOS ，但不适用于 Android 。

带有预览的示例代码可以在这里找到：https://snack.expo.io/@tushark/absolute-android

请同时检查iOS和android。

这是我要创建的布局。

Answer 1

我已经从您在此处提供的示例代码创建了一个新的Expo项目：https://snack.expo.io/S1yDf4Q47

在AbsoluteView组件上添加另一个View来处理显示屏幕：

<View style={styles.container}>
  <View style={{borderColor:'transparent'}}> // add borderColor, or the screen looks weird on android (i don't know why)
    {View of card, row, title and content styles}
  </View>
  <OrangeButton
      label="CONFIRM"
      onPress={() => console.log('Pressed')}
      styleButton={styles.loginBtn}
  />
</View>

和Button组件我将Bottom: -20更改为top: width / 3,

布局看起来像：

Android：

iOS：

Answer 2

我建议将橙色按钮留在卡盒外部，并使用带有设备高度的绝对位置来定位它，也可以对卡盒进行相同操作，以使按钮具有与卡盒上的卡盒相关的相同位置任何设备。

例如 顶部：Dimensions.get（'window'）。height / 8