Question

我已经创建了本机模态反应，但是当用户尝试单击它时，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>
)

在上面的代码中，我添加了其中具有touchableOpacity的FilterScreen组件，但是当模式打开时，我无法单击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但上面的代码可以运行，但滤镜中的相同代码无法通过添加组件来运行，为什么呢？

注意：第1部分不起作用，但第2部分代码为什么起作用？

Answer 1

嘿，不确定您是否仍然遇到此问题，但是我的问题是我从TouchableOpacity包而不是默认的react-native包中导入了react-native-gesture-handler。那是我自动完成选择解决的软件包。将导入更改为其他软件包后，它又可以按预期工作。

import { TouchableOpacity } from 'react-native';

Answer 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>

如果要创建像FliterScreen.js这样的单独的组件类，请尝试如下所示

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

export default FliterScreen;

和在Main class中。

import FliterScreen from './ui/FliterScreen';

并像在第1部分中所述那样使用。

Answer 3

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

Answer 4

如何创建此过滤器组件？您是否要创建类并使用render方法返回视图？

Answer 5

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

Answer 6

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

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

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

Answer 7

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

TouchableOpacity和按钮无法在反应本机Modal中工作？

7 个答案: