Размах сверху вниз не работает гладко с Panresponder React native (Android) - PullRequest
0 голосов
/ 19 января 2019

Привет, друзья! Я хочу разработать анимацию типа приложения inshots на реагировать нативно, поэтому я беру ссылку по этой ссылке 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, так что есть идеи, как я могу это решить?Ваши предложения приветствуются, пожалуйста

...