25

我已经创建了反应本机模式，但是当用户尝试点击它时，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 部分代码有效，为什么会这样？

4

8 回答 8

104

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

import { TouchableOpacity } from 'react-native';
于 2019-09-19T10:07:31.220 回答
3

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

于 2021-02-28T17:02:50.977 回答
2

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

于 2021-03-09T20:11:58.873 回答
2

如果您使用 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;

并在主要课程中。

import FilterScreen from './ui/FilterScreen';

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

于 2019-03-28T04:19:58.187 回答
0

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

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

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

于 2021-09-22T06:37:07.877 回答
0

接缝可以在 Ios 上正常工作，但不适用于 android，而是使用新的 Pressable 组件。见文档

于 2021-10-06T11:42:51.960 回答
0

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

于 2021-08-11T15:53:09.933 回答
0

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

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

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

于 2021-07-29T23:14:21.920 回答