TouchableOpacity 和按钮在反应原生模态中不起作用？答案

【问题标题】：TouchableOpacity and button not working in react native Modal?TouchableOpacity 和按钮在反应原生模态中不起作用？
【发布时间】：2019-08-18 17:42:19
【问题描述】：

我已经创建了反应原生模式，但是当用户尝试点击它时，TouchableOpacity 和按钮没有被点击，为什么会这样？

代码：（第 1 部分）

<Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{marginTop: 22}}>
            <View>
              <FilterScreen/>
              <TouchableHighlight
                onPress={() => 
                  this._setModalVisible(!this.state.modalVisible)
                }>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

FilterScreen 组件：

return(
   <View>
      <TouchableOpacity>
           <Text>Inside Filter screen</Text>
      </TouchableOpacity>
    </View>
)

在上面的代码中，我添加了 FilterScreen 组件，它里面有 touchableOpacity 但是当模态打开时我无法点击 toucableopacity 组件，它只能在模态中显示它，但 onClick 不起作用。

代码：（第 2 部分）

<Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{marginTop: 22}}>
            <View>
               <TouchableOpacity>
                 <Text>Inside Filter screen</Text>
               </TouchableOpacity>
              <TouchableHighlight
                onPress={() => 
                  this._setModalVisible(!this.state.modalVisible)
                }>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

如果我在 Modal 中添加 touchableOpacity ，上面的代码就会运行，但是 filterscreen 中的相同代码不能通过添加组件来工作，为什么会这样？

注意：第 1 部分无效，但第 2 部分代码有效，为什么会这样？

【问题讨论】：

“TouchableOpacity 仅显示而 onclick 不起作用”是什么意思？但是你没有定义任何东西。你只在 TouchableHighlight 中拥有它，而不是在 touchable opacity 中
@TyroHunter 第 1 部分代码和第 2 部分代码都相同，但有一些小的更改，但在我的情况下，第 1 部分代码不起作用，但第 2 部分代码有效，为什么会这样？

标签： javascript reactjs react-native

【解决方案1】：

我的问题是我从react-native-gesture-handler 包中导入了TouchableOpacity，而不是default react-native 包。那是我的自动完成选择解决它的包。将导入更改为另一个包后，它再次按预期工作。

import { TouchableOpacity } from 'react-native';

【讨论】：

谢谢? ...但是这个手势处理程序包是什么？！它一直在到处出现
当我按照文档介绍屏幕之间的导航时，react-native-gesture-handler 进入了我的代码。即使现在我想使用模态而不是离开“主”屏幕，它仍然潜伏着。
我只能通过使用 react-native-gesture-handler 中的 TouchableOpacity 和 react-native 中的 not 来实现此功能。尽管如此，这个答案为我指明了正确的方向，赞成
我只花了 1 小时砸键盘，然后我发现了这个...
经验教训！永远不要从非预期的包中导入类似命名的东西。非常感谢

【解决方案2】：

尝试重建项目，如果在开发过程中有时通过启用热重新加载重新加载应用程序，或者在模式打开时通过命令 + r 重新加载，可能会破坏功能，就我而言。

【讨论】：

【解决方案3】：

如果您使用 FilterScreen 组件作为内部函数，请尝试这样

renderFilterScreen = () => {
return(
   <View>
      <TouchableOpacity>
           <Text>Inside Filter screen</Text>
      </TouchableOpacity>
    </View>
)
}

在代码中

 <Modal
          animationType="slide"
          transparent={false}
          visible={this.state.modalVisible}
          onRequestClose={() => {
            Alert.alert('Modal has been closed.');
          }}>
          <View style={{marginTop: 22}}>
            <View>
              {this.renderFilterScreen()}
              <TouchableHighlight
                onPress={() => 
                  this._setModalVisible(!this.state.modalVisible)
                }>
                <Text>Hide Modal</Text>
              </TouchableHighlight>
            </View>
          </View>
        </Modal>

如果您要创建一个单独的组件类，如FilterScreen.js，请尝试如下

class FilterScreen extends React.Component {
 render = () => (
    <View>
      <TouchableOpacity>
           <Text>Inside Filter screen</Text>
      </TouchableOpacity>
    </View>
);
}

export default FilterScreen;

在 Main 类中。

import FilterScreen from './ui/FilterScreen';

并像您在第 1 部分中所说的那样使用。

【讨论】：

其中一种方法可以解决您的问题，请检查
您的回答无效。我正在导入 FilterScreen 并在 Modal 中使用它，但 TouchablOpacity 不起作用我无法点击它。
你是否处理代码中的任何 onPress 逻辑？，如果不尝试在 onPress 上进行控制台操作，或者尝试从 FilterScreen 中删除父，以防万一，这些是我使用的方法我的代码和工作顺利，请尝试让我知道

【解决方案4】：

我正在运行 RN 0.63.4，唯一对我有用的是使用新的 Pressable 组件。

【讨论】：

【解决方案5】：

在解决了 React Native 模态问题之后，我最终创建了这个基于钩子的模态库。

https://www.npmjs.com/package/@idiosync/react-native-modal

它没有使用 RN 实现使用的额外原生层，这似乎是它很多问题的根源

【讨论】：

【解决方案6】：

在我的情况下，我通过 useState 帮助解决它，当我尝试使用静态值打开时，我无法按下按钮，但如果我在钩子的帮助下打开模式，则工作正常

【讨论】：

欢迎您！感谢您的回答，但请阅读How To Answer Well 并提高其质量。

【解决方案7】：

就我而言，我已经从 react-native 导入了 TouchableOpacity，但它没有用。我只能通过像这样从 react-native-gesture-handler 导入 TouchableOpacity 来完成这项工作：

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

参考链接https://docs.swmansion.com/react-native-gesture-handler/docs/

【讨论】：

【解决方案8】：

在 Ios 上可以正常工作但不适用于 android 的接缝使用新的 Pressable 组件代替。 see documentation

【讨论】：