[英]TouchableOpacity and button not working in react native Modal?
I have created react native modal but TouchableOpacity and button doesn't get clicked when the user tries to click on it why so?我已经创建了 React Native Modal,但是 TouchableOpacity 和按钮在用户尝试点击它时没有被点击,为什么会这样?
code: (part 1)代码:(第 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 component:过滤屏幕组件:
return(
<View>
<TouchableOpacity>
<Text>Inside Filter screen</Text>
</TouchableOpacity>
</View>
)
In the above code, I have added FilterScreen component which has touchableOpacity inside it but when modal opens up I am not able to click on toucableopacity component it only displays it in modal but onClick not working.在上面的代码中,我添加了其中具有 touchableOpacity 的 FilterScreen 组件,但是当模态打开时我无法单击 toucableopacity 组件,它仅以模态显示它,但 onClick 不工作。
Code: (part 2)代码:(第 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>
Above code runs if I add touchableOpacity inside Modal but same code inside filterscreen doesn't work by adding component why so?如果我在 Modal 中添加 touchableOpacity,上面的代码就会运行,但是通过添加组件,filterscreen 中的相同代码不起作用,为什么这样呢?
Note: part 1 doesn't work but part 2 code works why so?注意:第 1 部分不起作用,但第 2 部分代码有效,为什么这样呢?
My problem was that I imported the TouchableOpacity
from the react-native-gesture-handler
package, rather then the default react-native
package.我的问题是我从react-native-gesture-handler
包中导入了TouchableOpacity
,而不是default react-native
包。 That was the package my auto-complete choose to resolve it to.那是我的自动完成选择解决它的包。 After changing the import to the other package it worked again as intended.将导入更改为另一个包后,它再次按预期工作。
import { TouchableOpacity } from 'react-native';
if you are using FilterScreen component as an inner Function try like this如果您使用 FilterScreen 组件作为内部函数,请尝试这样
renderFilterScreen = () => {
return(
<View>
<TouchableOpacity>
<Text>Inside Filter screen</Text>
</TouchableOpacity>
</View>
)
}
and in the code并在代码中
<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>
if you are creating a separate component class like FilterScreen.js
, try like below如果您正在创建一个单独的组件类,如FilterScreen.js
,请尝试如下
class FilterScreen extends React.Component {
render = () => (
<View>
<TouchableOpacity>
<Text>Inside Filter screen</Text>
</TouchableOpacity>
</View>
);
}
export default FilterScreen;
and in the Main class.并在 Main 类中。
import FilterScreen from './ui/FilterScreen';
and use like you called in the part 1.并像您在第 1 部分中所说的那样使用。
尝试重建项目,如果在开发过程中有时通过启用热重新加载重新加载应用程序,或者在模式打开时通过 command + r 重新加载,可能会破坏功能,就我而言。
我正在运行 RN 0.63.4,唯一对我有用的是使用新的Pressable
组件。
My case was opposite too.我的情况也相反。 It start to work when I use react-native-gesture-handler.当我使用 react-native-gesture-handler 时它开始工作。 So if you need TouchableOpacity in an animated modal(which uses gesture handler's PanGestureHandler probably) use it from react-native-gesture-handler.因此,如果您需要动画模式中的 TouchableOpacity(可能使用手势处理程序的 PanGestureHandler),请使用 react-native-gesture-handler 中的它。
After no end of problems with React Native modals, I ended up creating this hook based modal library.在 React Native modals 没有结束问题之后,我最终创建了这个基于钩子的模态库。
https://www.npmjs.com/package/@idiosync/react-native-modal https://www.npmjs.com/package/@idiosync/react-native-modal
It doesn't use the additional native layer that the RN implementation uses, which seems to be the source of a lot of its problems它没有使用 RN 实现使用的额外原生层,这似乎是其很多问题的根源
在我的情况下,我通过帮助 useState 解决它,当我尝试使用静态值打开时,我无法按下按钮,但是如果我在钩子的帮助下打开模态,则可以正常工作
In my case, I have imported TouchableOpacity from react-native but it didn't work.就我而言,我从 react-native 导入了 TouchableOpacity 但它没有用。 I only get this work by importing TouchableOpacity from react-native-gesture-handler like this:我只能通过像这样从 react-native-gesture-handler 导入 TouchableOpacity 来完成这项工作:
import TouchableOpacity from 'react-native-gesture-handler'
Reference link https://docs.swmansion.com/react-native-gesture-handler/docs/参考链接https://docs.swmansion.com/react-native-gesture-handler/docs/
seams to work fine on Ios but not for android use the new Pressable component instead.接缝可以在 Ios 上正常工作,但不适用于 android,请改用新的 Pressable 组件。 see documentation查看文档
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.