您好朋友，我想在React Native中开发Inshots App类型的动画，因此我从此链接Inshort UI中获取了参考。下面是我的代码工作
constructor(props) {
super(props);
console.log(TAG, "PROPS---->" + JSON.stringify(this.props.navigation.state.params.dashboardNewsDetailData))
this.position = new Animated.ValueXY()
this.swipedCardPosition = new Animated.ValueXY({ x: 0, y: -SCREEN_HEIGHT })
this.state = {
tags: [],
headerTitle: this.props.navigation.state.params.title,
isBookmarked: false,
isLiked: false,
totalLikes: 32,
dashboardNewsDetailData: [],
currentIndex: 0,
}
}
componentWillMount() {
this.PanResponder = PanResponder.create({
onStartShouldSetPanResponder: (e, gestureState) => true,
onPanResponderMove: (evt, gestureState) => {
if (gestureState.dy > 0 && (this.state.currentIndex > 0)) {
this.swipedCardPosition.setValue({
x: 0, y: -SCREEN_HEIGHT + gestureState.dy
})
}
else if (this.state.currentIndex == 0) {
this.setState({ isReverse: false })
}
else {
this.position.setValue({ y: gestureState.dy })
}
},
onPanResponderRelease: (evt, gestureState) => {
if (this.state.currentIndex > 0 && gestureState.dy > 1 && gestureState.vy < 10) {
Animated.timing(this.swipedCardPosition, {
toValue: ({ x: 0, y: 0 }),
duration: 100
}).start(() => {
this.setState({ currentIndex: this.state.currentIndex - 1 })
this.swipedCardPosition.setValue({ x: 0, y: -SCREEN_HEIGHT })
})
}
else if (-gestureState.dy > 1 && -gestureState.vy > 0.1) {
Animated.timing(this.position, {
toValue: ({ x: 0, y: -SCREEN_HEIGHT }),
duration: 100
}).start(() => {
this.setState({ currentIndex: this.state.currentIndex + 1 })
this.position.setValue({ x: 0, y: 0 })
})
}
else {
Animated.parallel([
Animated.spring(this.position, {
toValue: ({ x: 0, y: 0 })
}),
Animated.spring(this.swipedCardPosition, {
toValue: ({ x: 0, y: -SCREEN_HEIGHT })
})
]).start()
if (this.state.currentIndex == 0) {
this.setState({ isReverse: true })
}
}
}
})
}
带有“动画视图”的主要渲染功能
render() {
return (
<View style={{ flex: 1 }}>
{this.renderMyCustomView()}
</View>
)
}
renderArticles = () => {
//let ARTICLES = this.state.dashboardNewsDetailData
return this.state.dashboardNewsDetailData.map((item, i) => {
if (i == this.state.currentIndex - 1) {
return (
<Animated.View key={item.id} style={this.swipedCardPosition.getLayout()}
{...this.PanResponder.panHandlers}
>
<View style={[globalStyles.safeviewStyle, { backgroundColor: colors.white, height: SCREEN_HEIGHT, width: SCREEN_WIDTH, position: 'absolute' }]}>
{this.openModal()}
<View style={[styles.searchScreenItemLeftView]}>
<View style={[styles.rescentSeachTextView, { backgroundColor: colors.white }]}>
<View style={[styles.newsDetailTopImage]}>
{this.state.dashboardNewsDetailData && <CacheableImage style={[styles.newsDetailTopImageView,]} source={{ uri: this.state.dashboardNewsDetailData ? encodeURI(this.state.dashboardNewsDetailData[i].imageUrl) : encodeURI(this.state.dashboardNewsDetailData[i].imageUrl) }} permanent={true} />}
</View>
<View style={{ flex: 1, }}>
<Text style={[styles.newsArticleDetailTitle, { color: colors.articleNewsTitle }]}>{this.state.dashboardNewsDetailData ? this.state.dashboardNewsDetailData[i].title : this.state.dashboardNewsDetailData[i].title}</Text>
{(this.state.dashboardNewsDetailData != null) ?
<Text style={[styles.summaryText, { lineHeight: (globals.iPhoneX) ? WINDOW.height * 0.028 : WINDOW.height * 0.0315 }, { color: colors.newsDetailSummaryLight }]}>{this.state.dashboardNewsDetailData[i].summary} </Text>
: null}
<Text style={[styles.newsArticleDetailDate, { color: colors.newsDetailDate }]}>{this.state.dashboardNewsDetailData[i].source + " - " + moment(this.state.dashboardNewsDetailData[i].published_date).format('MMM DD, YYYY')}</Text>
<View style={{ flex: 1, marginLeft: 15, marginTop: 10, flexDirection: 'row' }}>
<FlatList
ref={"myFlatList"}
data={this.state.dashboardNewsDetailData[this.state.currentIndex].tags}
style={{ height: 20, marginBottom: 10 }}
renderItem={({ item }) => this.renderTags(item)}
keyExtractor={(item, index) => index.toString()}
horizontal={true}
showsHorizontalScrollIndicator={false}
/>
</View>
</View>
</View>
</View>
</View>
</Animated.View>
)
}
else if (i < this.state.currentIndex) {
console.log("else if")
return null
}
if (i == this.state.currentIndex) {
console.log("else if - if")
return (
<Animated.View key={item.id} style={this.position.getLayout()}
{...this.PanResponder.panHandlers}
>
<View style={[globalStyles.safeviewStyle, { position: 'absolute', backgroundColor: colors.white, height: SCREEN_HEIGHT, width: SCREEN_WIDTH }]}>
{this.openModal()}
<View style={[styles.searchScreenItemLeftView]}>
<View style={[styles.rescentSeachTextView, { backgroundColor: colors.white }]}>
<View style={[styles.newsDetailTopImage]}>
{this.state.dashboardNewsDetailData && <CacheableImage style={[styles.newsDetailTopImageView,]} source={{ uri: this.state.dashboardNewsDetailData ? encodeURI(this.state.dashboardNewsDetailData[i].imageUrl) : encodeURI(this.state.dashboardNewsDetailData[i].imageUrl) }} permanent={true} />}
</View>
<View style={{ flex: 1 }}>
<Text style={[styles.newsArticleDetailTitle, { color: colors.articleNewsTitle }]}>{this.state.dashboardNewsDetailData ? this.state.dashboardNewsDetailData[i].title : this.state.dashboardNewsDetailData[i].title}</Text>
{(this.state.dashboardNewsDetailData != null) ?
<Text style={[styles.summaryText, { lineHeight: (globals.iPhoneX) ? WINDOW.height * 0.028 : WINDOW.height * 0.0315 }, { color: colors.newsDetailSummaryLight }]}>{this.state.dashboardNewsDetailData[i].summary} </Text>
: null}
<Text style={[styles.newsArticleDetailDate, { color: colors.newsDetailDate }]}>{this.state.dashboardNewsDetailData[i].source + " - " + moment(this.state.dashboardNewsDetailData[i].published_date).format('MMM DD, YYYY')}</Text>
<View style={{ flex: 1, marginLeft: 15, marginTop: 10, flexDirection: 'row' }}>
<FlatList
ref={"myFlatList"}
data={this.state.dashboardNewsDetailData[this.state.currentIndex].tags}
style={{ height: 20, marginBottom: 10 }}
renderItem={({ item }) => this.renderTags(item)}
keyExtractor={(item, index) => index.toString()}
horizontal={true}
showsHorizontalScrollIndicator={false}
/>
</View>
</View>
</View>
</View>
</View>
</Animated.View>
)
}
else {
console.log("else if -else : " + this.state.currentIndex + "i--> : " + i)
if (this.state.currentIndex == 0 && this.state.isReverse) {
return null
}
else {
return (
<Animated.View key={item.id}>
<View style={[globalStyles.safeviewStyle, { position: 'absolute', backgroundColor: colors.white, height: SCREEN_HEIGHT, width: SCREEN_WIDTH }]}>
{this.openModal()}
<View style={[styles.searchScreenItemLeftView]}>
<View style={[styles.rescentSeachTextView, { backgroundColor: colors.white }]}>
<View style={[styles.newsDetailTopImage]}>
{this.state.dashboardNewsDetailData && <CacheableImage style={[styles.newsDetailTopImageView,]} source={{ uri: this.state.dashboardNewsDetailData ? encodeURI(this.state.dashboardNewsDetailData[i].imageUrl) : encodeURI(this.state.dashboardNewsDetailData[i].imageUrl) }} permanent={true} />}
</View>
<View style={{ flex: 1, }}>
<Text style={[styles.newsArticleDetailTitle, { color: colors.articleNewsTitle }]}>{this.state.dashboardNewsDetailData ? this.state.dashboardNewsDetailData[i].title : this.state.dashboardNewsDetailData[i].title}</Text>
{(this.state.dashboardNewsDetailData != null) ?
<Text style={[styles.summaryText, { lineHeight: (globals.iPhoneX) ? WINDOW.height * 0.028 : WINDOW.height * 0.0315 }, { color: colors.newsDetailSummaryLight }]}>{this.state.dashboardNewsDetailData[i].summary} </Text>
: null}
<Text style={[styles.newsArticleDetailDate, { color: colors.newsDetailDate }]}>{this.state.dashboardNewsDetailData[i].source + " - " + moment(this.state.dashboardNewsDetailData[i].published_date).format('MMM DD, YYYY')}</Text>
<View style={{ flex: 1, marginLeft: 15, marginTop: 10, flexDirection: 'row' }}>
<FlatList
ref={"myFlatList"}
data={this.state.dashboardNewsDetailData[this.state.currentIndex].tags}
style={{ height: 20, marginBottom: 10 }}
renderItem={({ item }) => this.renderTags(item)}
keyExtractor={(item, index) => index.toString()}
horizontal={true}
showsHorizontalScrollIndicator={false}
/>
</View>
</View>
</View>
</View>
</View>
</Animated.View>
)
}
}
}).reverse()
}
我的问题是，当我在iOS上运行上述代码时，它运行正常，但是在Android版本中，当我第一次加载屏幕内容时彼此重叠，并且在滚动时，它无法像iOS那样完美流畅想法我该如何解决？您的所有建议都是可取的