2017-05-25 8 views
0

レンダリングの戻りメソッド内でループする方法はありますか?ループインサイダーレンダリングの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> 

     ) 
} 

私ができる場合、私はそれをただループ不思議でしたか?

ありがとうございました!

+1

は、ドキュメントに反応 - [まさにこの](https://facebook.github.io/react/docs/lists-and-keys.htmlを行う方法についての章があります)。 –

+1

長いリストをお持ちの場合は、フラットリストまたはリストを生成するためのその他のパフォーマンスオプションのいくつかを調べることをお勧めします。 –

答えて

3

使用アレイのmap() method

例えば私はメインを経由をお勧めしたい

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