Touchableopacity 在 React Navigation 中不起作用

Question

我正在使用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>
);
  }
}

Answer 1

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

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

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

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

Answer 2

这是我根据您的原始代码编写的工具。它工作正常。请你把它与你的比较。或者可以肯定的是，发布您的 HomeScreen。我想我可以弄清楚。

如果你想测试它。复制我的所有内容并将其粘贴到您的 App.js 中（确保根 index.js 适合新的）

import React, { Component } from 'react';
import { createAppContainer, createStackNavigator } from 'react-navigation'
import { TouchableOpacity, View } from 'react-native'

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

class DetailScreen extends Component {
  render() {
    return (
      <View
        style={{
          width: 200,
          height: 500,
          backgroundColor: "yellow"
        }}
      />
    )
  }
}

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

const AppContainer = createAppContainer(stack);

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

export default App;