React Native 无法显示平面列表

Question

我想显示我创建的 FlatList。我想显示数据中的标题和艺术家。没有错误，但我的输出不会出现任何内容。

这是我的数据：

var track =   
[ 
 { List: 'list1', 
   data: 
   [
   {id: '1', url: 'http://tegos.kz/new/mp3_full/Luis_Fonsi_feat._Daddy_Yankee_-_Despacito.mp3',title: 'Despacito',artist:'Luis Fonsi'},
   {id: '2', url: 'http://tegos.kz/new/mp3_full/5_Seconds_Of_Summer_-_Youngblood.mp3',title: 'YoungBlood',artist:'5SOS'},
 ]
},
 { List: 'list2', 
  data: 
[
  {id: '1111', url: 'http://tegos.kz/new/mp3_full/Yellow_Claw_and_San_Holo_-_Summertime.mp3',title: 'Summertime',artist:'Yelow Claw'},
  {id: '2222', url: 'http://tegos.kz/new/mp3_full/Post_Malone_-_Better_Now.mp3',title: 'Better Now',artist:'Post Malone'},
]},
];

module.exports = {track:track};

这是我的 FlatList:

export default class SongList extends Component{
render(){
const { navigate } = this.props.navigation;
return(
    <View>
    <FlatList
    data={track}
    renderItem={({item,index})=>{
        return(
            <FlatListItem item={item} index={index}>

            </FlatListItem>);
    }}
    >
    </FlatList>
    </View>
);
 }
 }

class FlatListItem extends Component{
render(){

    return(
        <View style={styles.list}>
        <View>

        <Text style={styles.itemTitle}>{this.props.item.title}</Text>
        <Text style={styles.itemArtist}>{this.props.item.artist}</Text>
        </View>
        </View>
    );
}

}

基本上我能运行这个程序。但是屏幕上什么也没有显示。只有空白背景。

const styles = StyleSheet.create({  
itemArtist:{
    textAlign: 'center',
    justifyContent: 'center',
    fontSize: 23,
    borderBottomWidth: 4,
    borderBottomColor: '#ccc',
    marginTop: 10,
    padding: 10,
    color: 'blue',
},
itemTitle:{
    textAlign: 'center',
    justifyContent: 'center',
    fontSize: 23,
    borderBottomWidth: 4,
    borderBottomColor: '#ccc',
    marginTop: 10,
    padding: 10,
    color: 'blue',
},
list:{
    flex:1,
}

Answer 1

你的代码应该如下：

您的数据：

export default [
  {
    List: 'list1',
    data: [
      {
        id: '1',
        url: 'http://tegos.kz/new/mp3_full/Luis_Fonsi_feat._Daddy_Yankee_-_Despacito.mp3',
        title: 'Despacito',
        artist: 'Luis Fonsi',
      },
      {
        id: '2',
        url: 'http://tegos.kz/new/mp3_full/5_Seconds_Of_Summer_-_Youngblood.mp3',
        title: 'YoungBlood',
        artist: '5SOS',
      },
    ],
  },
  {
    List: 'list2',
    data: [
      {
        id: '1111',
        url: 'http://tegos.kz/new/mp3_full/Yellow_Claw_and_San_Holo_-_Summertime.mp3',
        title: 'Summertime',
        artist: 'Yelow Claw',
      },
      {
        id: '2222',
        url: 'http://tegos.kz/new/mp3_full/Post_Malone_-_Better_Now.mp3',
        title: 'Better Now',
        artist: 'Post Malone',
      },
    ],
  },
];

像这样导入你的数据，我假设数据文件和你的代码在同一个文件夹中：

import track from './data';

您的组件：

export default class App extends Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <FlatList
          data={track}
          renderItem={({ item, index }) => {
            return <FlatListItem item={item} index={index} />;
          }}
        />
      </View>
    );
  }
}

class FlatListItem extends Component {
  render() {
    return (
      <View style={styles.list}>
        <View>
          <Text style={styles.itemTitle}>{this.props.item.data[0].title}</Text>
          <Text style={styles.itemArtist}>{this.props.item.data[0].artist}</Text>
        </View>
        <View>
          <Text style={styles.itemTitle}>{this.props.item.data[1].title}</Text>
          <Text style={styles.itemArtist}>{this.props.item.data[1].artist}</Text>
        </View>
      </View>
    );
  }
}

如果您只想在 FlatList 中显示 list1 的数据，您应该更改代码如下：

export default class App extends Component {
  render() {
    const { navigate } = this.props.navigation;
    return (
      <View>
        <FlatList
          data={track[0].data}
          renderItem={({ item, index }) => {
            return <FlatListItem item={item} index={index} />;
          }}
        />
      </View>
    );
  }
}

class FlatListItem extends Component {
  render() {
    return (
      <View style={styles.list}>
        <View>
          <Text style={styles.itemTitle}>{this.props.item.title}</Text>
          <Text style={styles.itemArtist}>{this.props.item.artist}</Text>
        </View>
      </View>
    );
  }
}

您可以改进数据模式，以便更好地展示它们。

Answer 2

调试步骤：-

尝试控制台跟踪，检查数据是否正常。
在 componentDidMount 中添加控制台并检查项目是否到达那里。
在平面列表中添加 keyExtractor，keyExtractor 告诉列表使用反应键的 id 而不是默认键属性。

  <FlatList
        data={track}
        keyExtractor={(item, index) => ""+index}
        renderItem={({ item, index }) => {
        return <FlatListItem item={item} index={index} />;
      }}
      />

React Native 无法显示平面列表

React native cannot display flat list

react-native

react-native-flatlist