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);

在主屏幕中，我想在视图上添加 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'

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

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

Answer 2

这是我根据您的原始代码实现的。它工作正常。请您将其与您的进行比较。或者可以肯定的是，post 您的主屏幕。我想我能弄明白。

如果你想测试一下。复制我的所有内容并将其粘贴到您的 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;

Touchableopacity 在 React Navigation 中不起作用

Touchabe Opacity doest work in React Navigation

react-native

touchableopacity

react-navigation