React Native Show <View> 使用循环答案

【问题标题】：React Native Show <View> using LoopReact Native Show <View> 使用循环
【发布时间】：2018-03-14 01:45:36
【问题描述】：

有没有办法使用“视图”使其循环？我已经尝试过使用：

function generateListViewPager (shapeStyle) {
    return () => {
        return (
            <View style={styles.pageContainer} >
                <ScrollView showsVerticalScrollIndicator={false}>
                for(let i = 0; i < 40; i++){
                    <View style={[styles.shapeBase]}>
                        <Image
                            style={{width: windowWidth, height: 260, alignItems: 'center'}}
                            source={{uri: 'https://test.com/img/i.jpg'}}
                        />
                        <View style={{
                            position: 'absolute',
                            width: windowWidth - 15,
                            height: 130,
                            bottom: 41,
                            backgroundColor: 'rgba(0, 0, 0, 0.1)'
                        }}>
                            <Text style={styles.TitleStyle}>Test i</Text>
                        </View>
                        <View style={styles.subButton}>
                        </View>
                        <View style={styles.hairline} />
                        <View style={styles.subContent}>
                        </View>
                    </View>
                }
                </ScrollView>
            </View>
        )
    }
}

我需要从 0 到 39 显示我的视图，我将如何使用循环来实现？谢谢

【问题讨论】：

标签： android ios react-native mobile

【解决方案1】：

您正在使用 for 循环评估 javascript，但您周围没有花括号。我认为您可以将重复组件包装成dumb component：

const MyRepeatedView = ({ i }) => {
    return (
        <View style={[styles.shapeBase]}>
            <Image
                style={{width: windowWidth, height: 260, alignItems: 'center'}}
                source={{uri: 'https://test.com/img/i.jpg'}}
            />
            <View style={{
                position: 'absolute',
                width: windowWidth - 15,
                height: 130,
                bottom: 41,
                backgroundColor: 'rgba(0, 0, 0, 0.1)'
            }}>
                <Text style={styles.TitleStyle}>Test {i}</Text>
            </View>
            <View style={styles.subButton}>
            </View>
            <View style={styles.hairline} />
            <View style={styles.subContent}>
            </View>
        </View>            
    );
};

function generateListViewPager (shapeStyle) {
    return () => {
        return (
            <View style={styles.pageContainer} >
                <ScrollView showsVerticalScrollIndicator={false}>
                {[...Array(40).keys()].map(i => <MyRepeatedView key={i} i={i} />)}
                </ScrollView>
            </View>
        )
    }
}

【讨论】：

哇，谢谢你使用：{[...Array(40).keys()].map(i => )} 保存问题警告子项
啊是的，包括 key 道具也有助于提高性能，我会更新我的答案
此版本仅在 iOS 上运行，但当我尝试在 Android 上使用时，内容不显示@joshweir

【解决方案2】：

也许您应该尝试使用Flatlist 组件。

在此处查看文档： https://facebook.github.io/react-native/docs/flatlist.html

【讨论】：