React Native 使用 flatlist 传递 rowId答案

【问题标题】：React Native pass rowId using flatlistReact Native 使用 flatlist 传递 rowId
【发布时间】：2019-01-09 05:31:44
【问题描述】：

我想传递我的 rowId 数据，但我会得到一个错误。我最初使用的是ListView，但现在它已被弃用，所以我必须改用Flatlist。但我无法通过我的 rowId。这就是我对平面列表的做法

export default class SongList extends Component
 {
renderSongsList() {
    let songsDataSource = this.props.section.songs;
        return(

        <FlatList
            data={songsDataSource}
            renderItem={({item,rowId}) => (
            <TouchableHighlight onPress={ () => Actions.Player({ songIndex: parseInt( rowId ), songs: this.props.section.songs  }) } activeOpacity={ 100 } underlayColor="rgba(246, 41, 118, 0.6)">
            <View>
              <Text style={styles.itemTitle}>
                { item.title }
              </Text >
              <Text style={styles.itemArtist}>
                { item.artist }
              </Text>
            </View>
          </TouchableHighlight>
        )}

            keyExtractor={(item, index) => index.toString()}
          />
    );
  } 
  render() 
  {
  return (
  <View style={ styles.list}>
  <View style={ styles.songsList }>
  { this.renderSongsList() }
  </View>
  </View>
  );}}

这是我使用ListView的旧代码

export default class SongList extends Component
 {
renderSongsList() {               
            let songsDataSource = new ListView.DataSource({ rowHasChanged: 
(r1, r2) => r1 !== r2 }).cloneWithRows( this.props.section.songs );
            return(
              <ListView
                dataSource={ songsDataSource }
                style={ styles.songsList }
                renderRow={(song, sectionId, hello) => (
                  <TouchableHighlight onPress={ () => Actions.Player({ songIndex: parseInt( hello ), songs: this.props.section.songs  }) } activeOpacity={ 100 } underlayColor="rgba(246, 41, 118, 0.6)">
                    <View key={song} style={ styles.song }>
                      <Text style={styles.itemTitle}>
                        { song.title }
                      </Text >
                      <Text style={styles.itemArtist}>
                        { song.artist }
                      </Text>
                    </View>
                  </TouchableHighlight>
                  )}/>
    );
  } 
  render() 
  {
  return (
  <View style={ styles.list}>
  <View style={ styles.songsList }>
  { this.renderSongsList() }
  </View>
  </View>
  );}}

【问题讨论】：

标签： listview react-native react-native-flatlist

【解决方案1】：

rowId 与FlatList 一起使用时将变为index

renderItem={({item, index}) => (

)

见reference document

也出于调试目的尝试打印它并检查它是否提供任何东西。

【讨论】：