React Native Flatlist 渲染项答案

【问题标题】：React Native Flatlist rendering itemsReact Native Flatlist 渲染项
【发布时间】：2019-04-06 09:41:11
【问题描述】：

我无法显示我的平面列表，并且我不确定我的编码是否正确。如果我运行它时没有输出。它只会显示一个白屏。我的数据是正确的，即 this.props.section.songs。我想在我的文本中显示标题和艺术家，但我做不到。

export default class SongList extends Component
  {
     renderSongsList() { 

         return( 
             <View>
                 <FlatList
                     data = {this.props.section.songs}
                     renderItem={(song, sectionId, rowId) => (
                         <TouchableOpacity onPress={ () => Actions.Player({songIndex: parseInt( rowId ),songs: this.props.section.songs, section: this.props.section }) }>
                         <View key={song}  style={ styles.song }>
                             <Text style={styles.itemTitle}>
                               { song.title}
                             </Text >
                             <Text style={styles.itemArtist}>
                               { song.artist }
                             </Text>
                           </View>
                         </TouchableOpacity>
                     )}
                 />
             </View>
         );              
       } 
   render() 
   {
   return (
       <View>     
       { this.renderSongsList() }
       </View>
   );}}

【问题讨论】：

请仔细检查您在渲染行方法中的歌曲变量中收到了什么... flatList 提供变量 {item} 中的数据项，您必须销毁它。

标签： react-native react-native-flatlist

【解决方案1】：

    export default class SongList extends Component
      {
     renderSongsList() { 

         return( 
             <View>
                 <FlatList
                     data = {this.props.section.songs}

// 您必须交叉检查您在此处收到的值。更好的是接收一个数组项 //这里并传递给渲染道具 // 或者尝试 {song, sectionId, rowId} this 代替 (song, sectionId, rowId) 见下文

                     renderItem={({song, sectionId, rowId}) => (
                         <TouchableOpacity onPress={ () => Actions.Player({songIndex: parseInt( rowId ),songs: this.props.section.songs, section: this.props.section }) }>
                         <View key={song}  style={ styles.song }>
                             <Text style={styles.itemTitle}>
                               { song.title}
                             </Text >
                             <Text style={styles.itemArtist}>
                               { song.artist }
                             </Text>
                           </View>
                         </TouchableOpacity>
                     )}
                 />
             </View>
         );              
       } 
   render() 
   {
   return (
       <View>     
       { this.renderSongsList() }
       </View>
   );}}

【讨论】：

还是不行。我应该得到的数据是歌曲的标题和艺术家：[ { id：'1'，标题：'Better Now'，艺术家：'Post Malone'，}，{ id：'2'，标题：'Despacito ', 艺术家: 'Luis Fonsi', }, ]
好的， this.renderItem(item)} />
这里的 Item 是您在此处传递的数组数据的一个索引。现在在渲染方法中，您可以按如下方式访问元素
renderitem(item){ console.log(item.id)} 像这样访问数据

【解决方案2】：

export default class SongList extends Component
  {
     renderItems(item){
    // Here you can access all items of your json by item.property  
    // Like your JSON is { id: '1', title: 'Better Now', artist: 'Post Malone', }
    // You can access these values as item.id, item.title etc       
    }

     renderSongsList() { 

         return( 
             <View>
                 <FlatList
                     data = {this.props.section.songs}
                     renderItem={(item) => this.renderItems(item)}
                 />
             </View>
         );              
       } 
   render() 
   {
   return (
       <View>     
       { this.renderSongsList() }
       </View>
   );}}

【讨论】：