时间戳

首页 > 解决方案 > 安卓的绝对位置

react-native - 安卓的绝对位置

问题描述

我正在尝试创建一个看起来像所附图片的屏幕。我使用的样式代码仅适用于iOS但不适用于Android。

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

请检查iOS和Android。

这是我要创建的布局。

在此处输入图像描述

标签： react-nativereact-native-android

解决方案

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

在AbsoluteViewComponent 上添加另一个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,

布局看起来像：

安卓 ：

安卓

IOS：

iOS

推荐阅读