Реагировать на элементы рендеринга Native Flatlist - PullRequest
Новая
       0

Реагировать на элементы рендеринга Native Flatlist

0 голосов
/ 02 ноября 2018

Я не могу показать свой плоский список, и я не уверен, правильное ли мое кодирование. Нет выходных данных, если при запуске. Он покажет только белый экран. Мои данные верны, это 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>
   );}}

Ответы [ 2 ]

0 голосов
/ 02 ноября 2018 
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>
   );}}
0 голосов
/ 02 ноября 2018 
    export default class SongList extends Component
      {
     renderSongsList() { 

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

// Вам необходимо перепроверить значения, которые вы здесь получаете. Лучше получить элемент массива // здесь и перейдем к реквизиту рендера // Или попробуйте {song, sectionId, rowId} вместо этого (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>
   );}}
...