React Native Show <View> с использованием цикла

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, как мне это сделать с помощью цикла? Спасибо

android ios react-native mobile

0

Shiroze 14 Мар 2018 в 04:45

Answer 1

Вы оцениваете javascript с помощью цикла for, но у вас нет фигурных скобок вокруг него. Я думаю, вы могли бы превратить повторяющийся компонент в тупой компонент :

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

1

joshweir 14 Мар 2018 в 02:32

Answer 2

Возможно, вам стоит попробовать использовать компонент Flatlist.

Смотрите документацию здесь: https://facebook.github.io/react-native/docs/flatlist. html

0

kahunaRN 14 Мар 2018 в 02:14

React Native Show <View> с использованием цикла

2 ответа

Похожие вопросы

Новые вопросы

android