首页 > 解决方案 > React Native 使用 flatlist 传递 rowId

问题描述

我想传递我的 rowId 数据,但我会得到一个错误。我ListView最初使用的是,但现在已弃用,所以我必须Flatlist改用它。但我无法通过我的 rowId。这就是我为 flatlist 做的方式

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>
  );}}

标签: listviewreact-nativereact-native-flatlist

解决方案


rowIdindex当你使用它时会变成FlatList

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

)

参考文件

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


推荐阅读