Question

我需要在使用if的条件后，在本机应用程序中显示scrollview。事实上，我有一个firebase中包含文本和标题的项目列表，但有时它们也可能包含图像。我需要以完全相同的顺序显示文本和标题列表以及图像（如果有的话）。这里是我使用的代码

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

    }

我现在看起来它甚至没有检查条件（data.image），它似乎总是直接进入else条件并只显示文本。 PS：我正在使用本教程制作一个可滚动的标题，它在显示文本时工作得很好，但在图像内部却没有https://medium.com/appandflow/react-native-scrollview-animated-header-10a18cb9469e。此外，如果删除if条件，我总是得到项目之间的空格..任何建议

Answer 1

这就是最终为我工作的代码..我希望它将来会帮助其他人

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

在本机反应条件后呈现scrollview

1 个答案: