创建参照https://snack.expo.io/rJBRhOLU-
const cardOne = require("../../image/doginfo-1.png");
const cardTwo = require("../../image/doginfo-2.png");
const cardThree = require("../../image/doginfo-3.png");
const cardFour = require("../../image/doginfo-4.png");
class AdvancedDeck extends Component {
constructor(props) {
super(props);
this.sate = {
cardIndex: 0,
swipedAllCards: false,
swipeDirection: "",
cards: [
{
text: "Card One",
name: "One",
image: cardOne
},
{
text: "Card Two",
name: "Two",
image: cardTwo
},
{
text: "Card Three",
name: "Three",
image: cardThree
},
{
text: "Card Four",
name: "Four",
image: cardFour
}
]
};
}
renderCard = (card, index) => {
return (
<Card style={{ elevation: 3 }}>
<CardItem>
<Left>
<Thumbnail source={card.image} />
<Body>
<Text>{card.text}</Text>
<Text note>NativeBase</Text>
</Body>
</Left>
</CardItem>
<CardItem cardBody>
<Image
style={{
resizeMode: "cover",
width: null,
flex: 1,
height: 300
}}
source={card.image}
/>
</CardItem>
<CardItem>
<IconNB name={"ios-heart"} style={{ color: "#ED4A6A" }} />
<Text>
{card.name}-{index}
</Text>
</CardItem>
</Card>
);
};
onSwipedAllCards = () => {
this.setState({
swipedAllCards: true
});
};
swipeLeft = () => {
this.swiper.swipeLeft();
};
render() {
return (
<Container style={styles.container}>
<Header>
<Left>
<Button transparent onPress={() => this.props.navigation.goBack()}>
<Icon name="arrow-back" />
</Button>
</Left>
<Body>
<Title>Advanced Deck Swiper</Title>
</Body>
<Right />
</Header>
<View style={{ flex: 1, padding: 12 }}>
<Swiper
ref={swiper => {
this.swiper = swiper;
}}
onSwiped={this.onSwiped}
onSwipedLeft={() => this.onSwiped("left")}
onSwipedRight={() => this.onSwiped("right")}
onSwipedTop={() => this.onSwiped("top")}
onSwipedBottom={() => this.onSwiped("bottom")}
onTapCard={this.swipeLeft}
cards={this.props.cards}
cardIndex={this.props.cardIndex}
cardVerticalMargin={80}
renderCard={this.renderCard}
onSwipedAll={this.onSwipedAllCards}
showSecondCard={false}
stackSize={3}
stackSeparation={15}
overlayLabels={{
bottom: {
title: "BLEAH",
style: {
label: {
backgroundColor: "black",
borderColor: "black",
color: "white",
borderWidth: 1
},
wrapper: {
flexDirection: "column",
alignItems: "center",
justifyContent: "center"
}
}
},
left: {
title: "NOPE",
style: {
label: {
backgroundColor: "black",
borderColor: "black",
color: "white",
borderWidth: 1
},
wrapper: {
flexDirection: "column",
alignItems: "flex-end",
justifyContent: "flex-start",
marginTop: 30,
marginLeft: -30
}
}
},
right: {
title: "LIKE",
style: {
label: {
backgroundColor: "black",
borderColor: "black",
color: "white",
borderWidth: 1
},
wrapper: {
flexDirection: "column",
alignItems: "flex-start",
justifyContent: "flex-start",
marginTop: 30,
marginLeft: 30
}
}
},
top: {
title: "SUPER LIKE",
style: {
label: {
backgroundColor: "black",
borderColor: "black",
color: "white",
borderWidth: 1
},
wrapper: {
flexDirection: "column",
alignItems: "center",
justifyContent: "center"
}
}
}
}}
animateOverlayLabelsOpacity
animateCardOpacity
swipeBackCard
/>
</View>
<View
style={{
flexDirection: "row",
flex: 1,
position: "absolute",
bottom: 50,
left: 0,
right: 0,
justifyContent: "space-between",
padding: 15
}}
>
<Button
style={{ backgroundColor: "black" }}
onPress={() => this.swiper.swipeBack()}
title="Swipe Back"
>
<Icon name="arrow-back" />
<Text>Swipe Left</Text>
</Button>
<Button iconRight onPress={() => this._deckSwiper._root.swipeRight()}>
<Text>Swipe Right</Text>
<Icon name="arrow-forward" />
</Button>
</View>
</Container>
);
}
}
export default AdvancedDeck;
问题是与
<Swiper
...
cards={this.props.cards}
...
你在this.state = { cards: ... }定义的，而不是卡