使用react-native-toast-notifications时Toast显示区域无法点击怎么办？

在React Native应用中使用react-native-toast-notifications包时，Toast显示期间，其宽度范围内的所有元素都无法被点击，操作被阻塞。以下是自定义的CustomToastProvider组件代码：

import React from 'react';
import { Colors } from '@utils';
import { Text } from '@components';
import { ToastProvider } from 'react-native-toast-notifications';
import { View } from 'react-native';

interface IProps {
 children: JSX.Element;
}

export const CustomToastProvider = ({ children }: IProps) => {
 return (
<ToastProvider
  placement="top"
  duration={5000}
  animationType="slide-in"
  animationDuration={250}
  textStyle={{ fontSize: 20 }}
  offset={50}
  offsetTop={30}
  offsetBottom={40}
  swipeEnabled={true}
  renderType={{
    custom: toast => (
      <View
        style={{
          maxWidth: '95%',
          paddingHorizontal: 15,
          paddingVertical: 10,
          backgroundColor: Colors.BlackLight,
          marginVertical: 4,
          marginRight: 40,
          borderRadius: 8,
          borderLeftColor: toast.data?.type === 'error' ? Colors.Red : Colors.GreenSuccess,
          borderLeftWidth: 6,
          justifyContent: 'center',
          alignSelf: 'flex-end',
        }}>
        <Text
          style={{
            fontSize: 14,
            color: Colors.White,
            fontWeight: 'bold',
            textAlign: 'left',
          }}>
          {toast.data.title}
        </Text>
        <Text style={{ color: Colors.White, marginTop: 2 }}>{toast.message}</Text>
      </View>
    ),
  }}>
  {children}
</ToastProvider>
);
};

这个问题的核心是Toast容器默认会拦截触摸事件，导致下方元素无法响应点击。可以通过以下两种方式解决：

方法一：全局禁用Toast触摸拦截 #

直接在ToastProvider中添加touchableDisabled={true}属性，这是库提供的官方配置，能让Toast不再拦截任何点击事件，下方元素即可正常响应操作：

<ToastProvider
  placement="top"
  duration={5000}
  animationType="slide-in"
  animationDuration={250}
  textStyle={{ fontSize: 20 }}
  offset={50}
  offsetTop={30}
  offsetBottom={40}
  swipeEnabled={true}
  touchableDisabled={true} {/* 添加这一行 */}
  renderType={{
    // 原有自定义渲染逻辑
  }}>
  {children}
</ToastProvider>

方法二：精细控制Toast交互区域 #

如果需要保留Toast自身的交互（比如点击Toast关闭），可以给自定义Toast的外层View设置pointerEvents="box-none"，这样容器本身不会拦截点击，但内部可交互元素仍能正常响应：

renderType={{
  custom: toast => (
    <View
      style={{
        maxWidth: '95%',
        paddingHorizontal: 15,
        paddingVertical: 10,
        backgroundColor: Colors.BlackLight,
        marginVertical: 4,
        marginRight: 40,
        borderRadius: 8,
        borderLeftColor: toast.data?.type === 'error' ? Colors.Red : Colors.GreenSuccess,
        borderLeftWidth: 6,
        justifyContent: 'center',
        alignSelf: 'flex-end',
      }}
      pointerEvents="box-none" {/* 添加这一行 */}
    >
      {/* 若需要点击Toast内部关闭，给内部元素单独开启交互 */}
      <View pointerEvents="auto">
        <Text
          style={{
            fontSize: 14,
            color: Colors.White,
            fontWeight: 'bold',
            textAlign: 'left',
          }}>
          {toast.data.title}
        </Text>
        <Text style={{ color: Colors.White, marginTop: 2 }}>{toast.message}</Text>
      </View>
    </View>
  ),
}}

关键说明 #

• touchableDisabled：react-native-toast-notifications官方属性，直接控制Toast容器是否拦截触摸事件，适合不需要Toast自身交互的场景。
• pointerEvents：React Native原生属性，box-none表示容器不拦截点击，但内部元素可响应；none则整个Toast都不响应点击，按需选择。

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