react-native-deck-swiper 触摸以查看配置文件

Question

我正在使用 react-native-deck-swiper 为项目复制类似火种的动作。我想做的一件事是让用户点击卡片，模态框将提供有关按下的特定卡片 s/he 的所有信息。我已经尝试了一些方法，所有的方法都有一些小的不同，但这里基本上是我尝试过的方法。

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>

就目前的代码而言，我按下按钮后它崩溃了，因为 Can't find variable: card

我也试过这样使用 currentItem: null：

      {this.state.currentItem && <Modal animationIn="zoomInDown"//this is a modification of the Modal element everything else is the same
          animationOut="zoomOutDown"
          animationInTiming={700}
          animationOutTiming={600}
          backdropTransitionInTiming={600}
          backdropTransitionOutTiming={600}
          isVisible={this.state.modalVisible}>
      <Text>{this.currentItem.card.name}</Text>
      </Modal>}

Answer 1

第一个，修改模态码：

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

并添加刷卡器的onTapCard

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

react-native-deck-swiper 触摸以查看配置文件

react-native-deck-swiper touch to view profile

modal-dialog

react-native

tinder

expo