React Native Elements FAB在含ScrollView的页面无法正常显示如何解决？

问题原因 #

你遇到的两个现象的核心原因如下：

• FAB放在ScrollView内部跟随滚动：是因为ScrollView内部的所有元素默认都属于滚动内容流，自然会跟随滚动
• FAB放在ScrollView外部不可见：有两个诱因：
  1. 外层根View未设置相对定位，FAB默认的绝对定位没有正确的参照父容器，位置跑出可视区域
  2. 你当前给FAB套了一层无样式的View，这层View遵循正常布局流占据空间，同时ScrollView的层级高于FAB，直接把FAB盖住了

修复步骤 #

1. 先调整根容器样式，给Styles.Container添加两个属性，确保它占满屏幕且作为FAB的定位参照：

const Styles = StyleSheet.create({
  Container: {
    flex: 1, // 占满整个屏幕高度
    position: 'relative', // 作为绝对定位元素的参照父容器
    // 保留你原来的其他Container样式即可
  },
  // 原有其他样式不变
})

2. 修改FAB的实现代码，去掉多余的外层View，同时设置zIndex保证FAB在最上层：

readBarcode() {
  return (
    <FAB 
      title="Barkod Okut" 
      placement="right"
      style={{ zIndex: 999 }} // 层级高于ScrollView，避免被遮盖
      // 可自定义调整位置，例如：
      // bottom={30}
      // right={20}
    />
  );
}

如果你需要保留外层View，就给外层View加上定位样式即可，写法如下：

readBarcode() {
  return (
    <View style={{
      position: 'absolute',
      right: 20,
      bottom: 30,
      zIndex: 999
    }}>
      <FAB title="Barkod Okut" />
    </View>
  );
}

3. 保持你现有render的结构不变即可，修改后FAB会固定在屏幕指定位置，不会跟随ScrollView滚动，也不会被内容遮盖。

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