在条件响应本机后呈现滚动视图 [英] render a scrollview after a condition in react native

问题描述

在使用if的条件之后，我需要在react native应用程序中显示滚动视图.实际上，我在Firebase中有一个包含文本和标题的项目列表，但有时它们也可能包含图像.我需要以完全相同的顺序显示文本和标题的列表，如果有的话还要显示图像.这是我使用的代码

i need to display a scrollview in react native application, after a condition using if. In fact, i have a list of items in firebase that contain text and title but sometimes they may contain images also. I need to display that list of text and titles in the exact same order and also the images if there is any. here the code i used

 _renderScrollViewContent() {
            const data = this.state.items
                if (data.image) {
                    return (
                        <View>
                            {data.map((item, i) =>
                                <View key={i}>
                                    <Image source={require('path')}/> 
                                <Text>{item.image}</Text>

                                <Text>{item.title}</Text>
                                <Text>{item.text} </Text>
                            </View>
                        )}
                    </View>
                );

            }
            else
            {
                return (
                    <View>
                        {data.map((item, i) =>
                            <View key={i} style={styles.row}>
                                <Text>{item.image}</Text>
                                <Text>{item.title}</Text>
                                <Text>{item.text} </Text>
                            </View>
                        )}
                    </View>
                );
            }
        }



render() {
        const headerHeight = this.state.scrollY.interpolate({
            inputRange: [0, HEADER_SCROLL_DISTANCE],
            outputRange: [HEADER_MAX_HEIGHT, HEADER_MIN_HEIGHT],
            extrapolate: 'clamp',
        });
        const imageOpacity = this.state.scrollY.interpolate({
            inputRange: [0, HEADER_SCROLL_DISTANCE / 2, HEADER_SCROLL_DISTANCE],
            outputRange: [1, 1, 0],
            extrapolate: 'clamp',
        });
        const imageTranslate = this.state.scrollY.interpolate({
            inputRange: [0, HEADER_SCROLL_DISTANCE],
            outputRange: [0, -50],
            extrapolate: 'clamp',
        });
        return (
            <View style={styles.fill}>
                <ScrollView
                    style={styles.fill}
                    scrollEventThrottle={16}
                    onScroll={Animated.event(
                         [{nativeEvent: {contentOffset: {y: this.state.scrollY}}}]
                           )}
                >
                    {this._renderScrollViewContent()}
                </ScrollView>      
        );

    }

I现在看来，它甚至没有检查条件(data.image)，而且似乎总是直接转到else条件，仅显示文本. PS:我正在使用本教程制作可滚动的标题，并且在显示文本而不显示其中的图像时效果非常好

I Now it seems that it's not even checking for the condition (data.image) and it seems that it always goes directly to the else condition and displays only the text. PS: i'm using this tutorial to make a scrollable header and it's working perfectly fine in displaying text but not images inside them https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e. Also, if delete the if condition, i always get the blank spaces between items .. any suggestion

推荐答案

所以这是最终对我有用的代码..我希望它将对以后的其他人有所帮助

so that's the code that finally worked for me ..i hope it will help someone else in the future

_renderScrollViewContent() {
        var productList = [];
        this.state.items.forEach(function (item) {
            if (!item.image) {
                productList.push(
                    <View key={item.key}>
                        <Text>{item.title}</Text>
                        <Text>{item.text}</Text>
                        <Text>{item.image}</Text>
                    </View>
                );
            }
            else {
                productList.push(
                    <View key={item.key}>
                        <Text>{item.title}</Text>
                        <Text>{item.text}</Text>
                        <Text>{item.image}</Text>
                        <Image source={require('path')}>
                            <View>
                                <Text>{item.legend}</Text>
                            </View>
                        </Image>
                    </View>
                );
            }
        }.bind(this));
        return (
            <View>
                {productList }
            </View>
        );
    }

这篇关于在条件响应本机后呈现滚动视图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！