时间戳

首页 > 解决方案 > 如何在本机反应中处理多个onPress

react-native - 如何在本机反应中处理多个onPress

问题描述

我有一个模态组件，我有两个按钮和一个 imageView。

const ImageModal = ({ modalOpen, onClose, returnButton, customerImage, nextPage, nextPageText }) => {
  const { container, modalToggle, modalClose, imageStyle } = styles;
  return (
    <Modal visible={modalOpen} animationType='slide'>
      <View>
        <View style={styles.ButtonsContainer}>
          
           {/* Button number 1*/}
          <TouchableOpacity onPress={onClose}>
            <View style={styles.buttonView}>
              <Text style={styles.textButton}>{returnButton}</Text>
            </View>
          </TouchableOpacity>

          {/* Button number 2*/}
          <TouchableOpacity onPress={nextPage}>
            <View style={styles.buttonView}>
              <Text style={styles.textButton}>{nextPageText}</Text>
            </View>
          </TouchableOpacity>

        </View>
        <Image style={styles.imageStyle} source={customerImage} />
      </View>
    </Modal>

我已将此组件导入我的屏幕组件。

<Modal visible={modalOpen} animationType='slide'>
   <ImageModal 
       returnButton="Ta om" 
       onClose={()=> setModalOpen(false)} 
       customerImage={{uri: image}}
       nextPage={() => navigation.navigate('SaveCase', { image })}
       nextPageText="Välj"
   />
</Modal>

但是当运行应用程序时，我只能按一个按钮（onClose）。但有时该按钮适用于“onClose”和“nextPage”道具。

标签： react-nativereact-props

解决方案

从您的代码中很难确定问题出在哪里。

可能的原因可能是：

  • 您的按钮重叠（最常见），
  • 您错误地使用了道具。

推荐阅读