循环内部渲染的return语句

Question

有没有办法在render的return方法中循环？

我有一个看起来像这样的对象：

export var Characters = [
    {
        id: 1,
        Name: "Abe",
        HitPointValue: "124",
        StrengthValue: "12",
        IntelligenceValue: "14",
        WisdomValue: "16",
        DexterityValue: "12",
        ConstitutionValue: "10",
        CharismaValue: "17",
        Avatar: require('./images/avatar_1.jpg')
    },
    {
        id: 2,
        Name: "Jake",
        HitPointValue: "141",
        StrengthValue: "21",
        IntelligenceValue: "6",
        WisdomValue: "5",
        DexterityValue: "8",
        ConstitutionValue: "20",
        CharismaValue: "10",
        Avatar: require('./images/avatar_2.jpg')
    }
]

而不是像这样写出对象中的每个字符：

render() {
        return (
               <View>
                   <View>
                       <Image source={getAvatar(1)} />
                   </View>
                   <View>
                       <Text>
                            Name: { getName(1)
                       </Text>
                   </View>
               </View>

        )
}

我想知道我是否可以循环通过它？

谢谢！

Answer 1

使用数组的map() method

e.g。

render() {
    return (
        <View>
            {Characters.map(character =>
                <View>
                    <Image source={character.avatar}/>
                    <Text>Name: {character.name}</Text>
                </View>
            )}
        </View>
    )
}