javascript - TouchableOpacity 和按钮在 react native 模态中不起作用？

Question

我已经创建了 react native 模式，但当用户尝试单击它时，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 部分代码可以工作，为什么会这样？

Answer 1

我的问题是我从react-native-gesture-handler包导入了TouchableOpacity，而不是默认的react-native包裹。这是我自动完成选择将其解析为的包。将导入更改为其他包后，它再次按预期工作。

import { TouchableOpacity } from 'react-native';