React native 反应本机甲板swiper触碰查看剖面

我正在使用

react native deck swiper

为一个项目复制一个类似火药的动作。我尝试做的一件事是让用户点击卡片，一个模态会显示出关于他/她按下的特定卡片的所有信息。我尝试了一些方法，这些方法各不相同，只是一些小方法，但这里基本上就是我尝试的方法

constructor(props) {
    super(props);
    this.state = {
      modalVisible: false,
      fontLoaded: false,
      currentItem: null,
    };
  }
toggleModal = (card) => {
    this.setState({
      modalVisible: !this.state.modalVisible,
    currentItem:card
  });

  };
  render() {
 return (
    <View>
    <View style={{ marginTop: 30, alignItems: 'center', backgroundColor:'rgb(255, 194, 194)' }}>
    {this.state.fontLoaded === true ? (<Text style={{ fontSize: 40, fontFamily:'Pacifico'}}>title</Text>) : (<Text>loading</Text>)}
    </View>
      <View style={styles.swiperContainer}>
        <Swiper
          animateCardOpacity
          containerStyle={styles.container}
          cards={photoCards}
          renderCard={card => <Card card={card} />}//importing from a custom const I have as a different file
          cardIndex={0}
          backgroundColor="white"
          stackSize={2}
          infinite
          disableTopSwipe={true}
          disableBottomSwipe={true}
          showSecondCard
          animateOverlayLabelsOpacity
          overlayLabels={{
            left: {
              title: 'NOPE',
              element: <OverlayLabel label="HAVE NOT READ" color="#E5566D" />,
              style: {
                wrapper: styles.overlayWrapper,
              },
            },
            right: {
              title: 'YES',
              element: <OverlayLabel label="HAVE READ" color="#4CCC93" />,
              style: {
                wrapper: {
                  ...styles.overlayWrapper,
                  alignItems: 'flex-start',
                  marginLeft: 30,
                },
              },
            },
          }}>
        <Button onPress={()=>this.toggleModal({photo:card.photo, name:card.name})} title="press" style={{backgroundColor:'rgba(0,0,0,1)'}}></Button> //I was planning to make the button transparent
        </Swiper>
      </View>
      {this.state.modalVisible === true ? (
      <Modal animationIn="zoomInDown"
          animationOut="zoomOutDown"
          animationInTiming={700}
          animationOutTiming={600}
          backdropTransitionInTiming={600}
          backdropTransitionOutTiming={600}>
      <Text>{this.card.name}</Text>//just a test to see if the information transfers...it doesn't 
      </Modal>):(<View></View>)}

    </View>

---

首先，更改模式代码：

<Modal
      animationType="slide"
      transparent={false}
      visible={this.state.modalVisible}
      onRequestClose={() => {
     //   this.toggleModal(null)}
      }}>
      <View style={{marginTop: 22}}>
        <View>
          <Text>Hello World!</Text>
          {this.state.currentItem && <Text>{this.state.currentItem.name}</Text> }
        </View>
      </View>
    </Modal>

{
//this.toggleModal（null）}
}}>
你好，世界！
{this.state.currentItem&&{this.state.currentItem.name}

并添加一张游泳卡

<Swiper
      animateCardOpacity
      containerStyle={styles.container}
      cards={photoCards}
      renderCard={card => <Card card={card} />}
      onTapCard={(index=>this.toggleModal({photo:photoCards[index].photo, name:photoCards[index].name})}
      cardIndex={0}
      backgroundColor="white"
      stackSize={2}
      infinite
      disableTopSwipe={true}
      disableBottomSwipe={true}
      showSecondCard
      animateOverlayLabelsOpacity
      overlayLabels={{
        left: {
          title: 'NOPE',
          element: <OverlayLabel label="HAVE NOT READ" color="#E5566D" />,
          style: {
            wrapper: styles.overlayWrapper,
          },
        },
        right: {
          title: 'YES',
          element: <OverlayLabel label="HAVE READ" color="#4CCC93" />,
          style: {
            wrapper: {
              ...styles.overlayWrapper,
              alignItems: 'flex-start',
              marginLeft: 30,
            },
          },
        },
      }}>
    <Button onPress={()=>this.toggleModal({photo:card.photo, name:card.name})} title="press" style={{backgroundColor:'rgba(0,0,0,1)'}}></Button> //I was planning to make the button transparent
    </Swiper>

}
onTapCard={（index=>this.toggleModal（{photo:photoCards[index].photo，name:photoCards[index].name}）}
cardIndex={0}
backgroundColor=“白色”
堆栈大小={2}
极大的
DisableTopswip={true}
disableBottomSwipe={true}
显示第二张卡片
animateOverlayLabelsOpacity
重叠带={{
左：{
标题：'不'，
元素：，
风格：{
包装器：styles.OverlawRapper，
},
},
对:{
标题：'是'，
元素：，
风格：{
包装器：{
…styles.OverlawRapper，
alignItems:'flex start'，
marginLeft:30，
},
},
},
}}>
this.toggleModal（{photo:card.photo，name:card.name}）}title=“press”style={{{{backgroundColor:'rgba（0,0,0,1）}}>//我正计划使按钮透明

card的未定义变量问题仍然存在。我想当我在

Swiper

组件中引用

card

时，它没有到达我看到的按钮。我收到一个错误，说

this.props.renderCard不是一个函数

这是我通过在renderCard中添加按钮尝试的：

renderCard={card=>，this.toggleModal（{photo:card.photo，name:card.name}}）title=“press”style={{{backgroundColor:'rgba（0,0,0,1）}}/>}

不是这样的，你的语法是错误的，试着将按钮的onClick处理程序移动到卡片的onPress，然后返回之前的内容。按卡片并测试。更新了答案

<Swiper
      animateCardOpacity
      containerStyle={styles.container}
      cards={photoCards}
      renderCard={card => <Card card={card} />}
      onTapCard={(index=>this.toggleModal({photo:photoCards[index].photo, name:photoCards[index].name})}
      cardIndex={0}
      backgroundColor="white"
      stackSize={2}
      infinite
      disableTopSwipe={true}
      disableBottomSwipe={true}
      showSecondCard
      animateOverlayLabelsOpacity
      overlayLabels={{
        left: {
          title: 'NOPE',
          element: <OverlayLabel label="HAVE NOT READ" color="#E5566D" />,
          style: {
            wrapper: styles.overlayWrapper,
          },
        },
        right: {
          title: 'YES',
          element: <OverlayLabel label="HAVE READ" color="#4CCC93" />,
          style: {
            wrapper: {
              ...styles.overlayWrapper,
              alignItems: 'flex-start',
              marginLeft: 30,
            },
          },
        },
      }}>
    <Button onPress={()=>this.toggleModal({photo:card.photo, name:card.name})} title="press" style={{backgroundColor:'rgba(0,0,0,1)'}}></Button> //I was planning to make the button transparent
    </Swiper>