如何将React Native Snackbar固定在屏幕底部而非ScrollView底部？

你的核心问题是把SnackBar放在了ScrollView内部，导致它会跟着滚动内容移动。要让它固定在屏幕底部，只需调整组件层级并配合定位样式即可：

• 用一个外层View包裹整个页面内容（包括ScrollView和SnackBar），设置flex:1占满屏幕
• 将SnackBar移到ScrollView的同级位置，给它添加绝对定位样式固定在底部
• 确保SnackBar的层级足够高，避免被其他元素遮挡

修改后的代码示例：

import { View, ScrollView, SafeAreaView, useState } from 'react-native';
import SnackBar from 'react-native-snackbar-component';

export default function YourComponent() {
  const [snackbarVisible, setSnackbarVisible] = useState(false);
  const [snackbarText, setSnackbarText] = useState('');

  const showSnackbar = () => {
    setSnackbarVisible(true);
    setSnackbarText('Added to favourites');
  };

  return (
    {/* 外层容器占满屏幕 */}
    <View style={{ flex: 1 }}>
      <ScrollView
        contentContainerStyle={{ paddingBottom: 20 }}
        className="flex-1 bg-neutral-900"
      >
        {/* ScrollView内部的原有内容 */}
        <SafeAreaView
          className={
            "absolute z-20 w-full flex-row justify-between items-center px-4 " +
            topMargin
          }
        >
          {/* SafeAreaView内的内容 */}
        </SafeAreaView>
        {/* 其他滚动内容 */}
      </ScrollView>

      {/* SnackBar移到ScrollView外部，固定在屏幕底部 */}
      <SnackBar
        visible={snackbarVisible}
        position="bottom"
        textMessage={snackbarText}
        actionHandler={() => setSnackbarVisible(false)}
        actionText="Dismiss"
        autoHidingTime={2000}
        // 定位样式：固定在屏幕底部，层级拉满
        style={{
          position: 'absolute',
          bottom: 0,
          width: '100%',
          zIndex: 999,
          // iOS需考虑底部安全区域的话，可改为：bottom: Platform.OS === 'ios' ? 34 : 0
        }}
      />
    </View>
  );
}

额外提示：你代码里的setSnackbarVisile是拼写错误，要改成setSnackbarVisible，否则点击Dismiss按钮会触发错误。

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