response-native-deck-swiper touch для просмотра профиля - PullRequest
Новая
       51

response-native-deck-swiper touch для просмотра профиля

0 голосов
/ 24 октября 2019

Я использую 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>

Поскольку код стоит сейчас, он потерпел крах, когда я нажимаю кнопку, потому что 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>}

1 Ответ

1 голос
/ 24 октября 2019

Первый, измените модальный код: 

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

и добавьте на TAPCard of Swiper 

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