react-native - React Native Flatlist 渲染项
问题描述
我无法显示我的平面列表,也不确定我的编码是否正确。如果我运行它时没有输出。它只会显示一个白屏。我的数据是正确的,即 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>
);}}
解决方案
export default class SongList extends Component
{
renderSongsList() {
return(
<View>
<FlatList
data = {this.props.section.songs}
// 您必须交叉检查您在此处收到的值。更好的是接收一个数组项 //here 并传递给渲染道具 // 或者尝试 {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>
);}}
推荐阅读
- r - 如何从来自多个 json 页面的多个列表中提取值
- javascript - 由于 lodash 在 Vue 中使用 Jest 进行测试在子组件中失败
- firebase - 是否可以排除 Firestore 索引上的字段?
- python - Python pandas 与 .loc 和切片等效的交叉选择
- docker - docker compose yaml 中的 Docker 加载
- git - 如何在不更改连续提交的 SHA-1 的情况下修改特定提交?
- php - 创建多个数组并将其关联到变量而不进行字符串转换
- python - pandas.read_html 仅将特定列转换为浮动
- php - Laravel 表单请求 - $this->user() 与授权中的 auth()->user()
- apache-spark - 如何设置 pod 以使用所有可用的 CPU 内核