React Native中如何创建固定定位的<View>覆盖层

当然可以实现啦！不过React Native里没有Web端那种position: fixed属性，但我们换个布局思路就能轻松达成你要的“滚动时保持位置不变”的效果～

问题分析 #

你现在的代码里把灰色盒子放在了ScrollView内部，用position: absolute定位在底部。这种情况下，盒子是相对于ScrollView的内容区域定位的，滚动时可能会出现位置偏移或者跟着内容滚动的问题，达不到固定的效果。

解决方案：调整布局结构 #

我们只需要把固定的灰色盒子从ScrollView里移出来，和ScrollView同级放在外层容器中，再通过样式控制它固定在底部即可。

修改后的完整代码示例：

import { View, ScrollView, StyleSheet } from 'react-native';

export default function YourComponent() {
  return (
    <View style={styles.container}>
      {/* 滚动内容区域 */}
      <ScrollView style={styles.scrollView}>
        {/* 这里放你需要滚动的所有内容 */}
      </ScrollView>
      {/* 固定在底部的灰色盒子 */}
      <View style={styles.continueToPaymentContainer}>
        {/* 盒子内部的内容，比如按钮、文字等 */}
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    position: 'relative', // 让内部absolute元素相对于这个容器定位
  },
  scrollView: {
    flex: 1, // 让ScrollView占满容器除固定盒子外的所有空间
  },
  continueToPaymentContainer: {
    width: '100%', // 用百分比适配不同屏幕宽度
    height: 100,
    position: 'absolute',
    bottom: 0,
    backgroundColor: 'grey',
    justifyContent: 'center', // 可选：让盒子内的内容垂直居中
    alignItems: 'center', // 可选：让盒子内的内容水平居中
  },
});

额外提示 #

如果你的应用需要适配iOS的底部安全区域（比如带刘海的机型），可以给灰色盒子加上底部内边距来避免内容被遮挡：

import { Platform } from 'react-native';

// 在continueToPaymentContainer样式里添加
paddingBottom: Platform.OS === 'ios' ? 34 : 0,

这样调整后，不管你向上还是向下滚动ScrollView，灰色盒子都会稳稳固定在屏幕底部，完全符合你的需求～

内容的提问来源于stack exchange，提问作者kurniawan26