<View> 使用循环反应原生节目

Question

有没有办法使用"视图"让它循环？我已经尝试使用：

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 的视图，如何使用循环来做到这一点？ 谢谢

Answer 1

你正在用你的for循环评估javascript，但你没有大括号。我认为您可以将重复组件包装成一个愚蠢的组件：

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

Answer 2

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

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