Question

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

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，但是您没有围绕它的花括号。我想你可以将你的重复组件包装成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>
        )
    }
}

Answer 2

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

检查文档： https://facebook.github.io/react-native/docs/flatlist.html

使用Loop实现本机显示<view>

2 个答案: