React Native中position与bottom属性不生效问题求助

嘿，我来帮你排查一下这个问题～你想把卡片固定在页面底部却没生效，主要是代码里的两个小细节导致的：

• 首先你的container设置了固定高度height:70，这会让容器本身只有70px高，就算子元素用了position: absolute和bottom:0，也只能在这个小容器的底部，而不是整个页面的底部。
• 其次，父容器没有设置position: 'relative'，React Native里absolute定位默认是相对于最近的非static定位父元素，父容器默认是static，所以你的卡片定位逻辑会乱掉，显示效果自然不对。

给你调整后的代码，应该就能解决问题了：

<View style={style.container}>
  <View style={style.card}>
    <TouchableOpacity>
      <Text>Button</Text>
    </TouchableOpacity>
  </View>
</View>

const styles = StyleSheet.create({
  container: {
    flexDirection: "column",
    backgroundColor: "#61D9B7",
    flex: 1, // 替换固定height，让容器占满整个屏幕高度
    position: 'relative', // 设置为relative，让子元素的absolute定位相对于它生效
  },
  card: {
    flexDirection: "row",
    marginBottom: 10,
    position: 'absolute',
    bottom: 0,
    width: '100%', // 可选：让卡片撑满屏幕宽度，避免只显示按钮的窄宽度
  },
});

简单说下修改逻辑：

1. 把container的height:70改成flex:1，这样容器会自动占满整个可用屏幕高度；
2. 给container加上position: 'relative'，确保子元素的绝对定位是基于这个容器的；
3. 给card加上width:'100%'，让卡片宽度和屏幕一致，按钮的显示更合理（如果不需要可以去掉）。

这样调整后，你的卡片应该就能稳稳固定在页面底部啦～

备注：内容来源于stack exchange，提问作者Bharath