时间戳

首页 > 解决方案 > Touchabe 不透明度在 React Navigation 中不起作用

react-native - Touchabe 不透明度在 React Navigation 中不起作用

问题描述

我正在使用RN版本0.59.9和React Navigaton 3.11.1.

我想在我的视图上添加 onPress，所以我将它包装在 TouchableOpacity 中，但它对我不起作用。

我尝试在 React Navigation 之外使用它，它仍然可以工作，所以可能是这个库中的一个错误。

我试图为要添加 OnPress 的视图设置高度，但仍然无法正常工作

更新：有关你们的更多信息，有一些代码：

我有两个这样的屏幕：

class VuaTraiCayApp extends Component {
      render() {
        return <AppContainer />;
      }
    }

    const stack = createStackNavigator(
      {
        Home: {
          screen: HomeScreen
        },
        Detail: {
          screen: DetailScreen
        }
      },
      {
        defaultNavigationOptions: {
          headerTitle: "Trang chủ"
        }
      }
    );

    const AppContainer = createAppContainer(stack);

在 HomeScreen 中，我想在视图上添加 onPress，所以我将视图包裹在 TouchabeOpacity 中。它不起作用：

<TouchableOpacity 
      onPress={()=> {
        alert("Clicked");
      }}
    >
      <View 
        style={{
          width: 200,
          height: 500,
          backgroundColor: "pink"
        }} 
      />
    </TouchableOpacity>

但是如果我在堆栈外使用相同的代码。让我们看看我将这段代码移动到根目录而不在堆栈中。它完美地工作。

class VuaTraiCayApp extends Component {
  render() {
    return (
       <TouchableOpacity 
          onPress={()=> {
            alert("Clicked");
          }}
        >
          <View 
            style={{
              width: 200,
              height: 500,
              backgroundColor: "pink"
            }} 
          />
        </TouchableOpacity>
);
  }
}

标签： react-nativereact-navigationtouchableopacity

解决方案

有时 VSCode 从手势处理程序导入 Touchable

import {
 TouchableOpacity
} from 'react-native-gesture-handler'

您需要正确链接库，否则它将显示按钮，但单击可能不起作用。（这只是我遇到的一个边缘情况）

其他有用的链接：https ://github.com/react-navigation/react-navigation/issues/1225

推荐阅读