render a scrollview after a condition in react native

问题

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

回答1:

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>
        );
    }

来源：https://stackoverflow.com/questions/43563724/render-a-scrollview-after-a-condition-in-react-native