[英]REACT NATIVE - Trigger Modal on App Screen using a Custom Component
I am trying to trigger on the App Screen a modal using a custom button component.我正在尝试使用自定义按钮组件在应用程序屏幕上触发模态。
I created a reusable button named SelectBoxLong.js我创建了一个名为SelectBoxLong.js的可重用按钮
<TouchableOpacity style={styles.containerLong} onPress={onPress}>
<Text style={styles.text}>{text}</Text>
<MaterialCommunityIcons name="menu-down" size={10} />
</TouchableOpacity>
Also, I created a modal component named FilterModal.js which includes the useState that triggers the modal:此外,我创建了一个名为FilterModal.js的模态组件,其中包含触发模态的 useState:
const FilterModal = ({ text, onPress }) => {
const [modalVisible, setModalVisible] = React.useState(false);
on the App Screen , I included the component and the FilterModal But I can't manage to make a connection between this 3.在App Screen 上,我包含了组件和 FilterModal 但我无法在这 3 之间建立联系。
What I want is that when the user taps on the SelectBoxLong the modal triggers the modal, and the header of the modal gets the title of the button我想要的是,当用户点击 SelectBoxLong 时,模态触发模态,模态的标题获取按钮的标题
I Tried我试过
-Create a function inside Modal that triggers Modal - 在 Modal 内部创建一个触发 Modal 的函数
-Pass as props the useState - 将 useState 作为道具传递
App screen:应用画面:
const [modalVisible, setModalVisible] = React.useState(false);
const [buttonTitle, setButtonTitle] = React.useState(‘’);
onPress = () => {
setModalVisible(true);
}
render(){
return(
……
<SelectBoxLong.js onPress={onPress} text={text}/>
<FilterModal modalVisible={modalVisible} onPress={onPress} text={buttonTitle} />
….
);
}
FilterModal.js FilterModal.js
const FilterModal = ({ modalVisible , text, onPress }) => {
const [modalVisible, setModalVisible] = React.useState(modalVisible);
useEffect(() => {
setModalVisible(modalVisible);
}, [modalVisible]);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.