[英]FlatList in react native is rendering but not showing text
我正在嘗試通過連接到內部JSON文件來呈現清單。 單位列表似乎正在呈現,但未顯示任何文本。 代碼中的卡片清單被渲染9次,JSON文件中有9個對象。 但是沒有文字顯示。
// libraryList.js
import React, { Component } from 'react';
import { FlatList } from 'react-native';
import { connect } from 'react-redux';
import ListItem from './ListItem';
class LibraryList extends Component {
renderItem(library) {
return <ListItem library={library} />;
}
render() {
// console.log(this.props);
// return;
return (
<FlatList
data={this.props.libraries}
renderItem={this.renderItem}
keyExtractor={library => library.id}
/>
);
}
}
const mapStateToProps = state => {
return { libraries: state.libraries };
};
export default connect(mapStateToProps)(LibraryList);
// ListItem.js
import React, { Component } from 'react';
import { Text } from 'react-native';
import { CardSection } from './common';
class ListItem extends Component {
render() {
return (
<CardSection>
<Text>{this.props.library.title}</Text>
</CardSection>
);
}
}
export default ListItem;
import React, { Component } from 'react';
import { Text } from 'react-native';
import { CardSection } from './common';
class ListItem extends Component {
render() {
return (
<CardSection>
<Text>{this.props.library.title}</Text>
</CardSection>
);
}
}
export default ListItem;
只想在此階段列出標題。
您需要修改renderItem
因為FlatList
將對象傳遞到renderItem
回調函數中。
而是使用以下內容
renderItem = ({ item }) => <ListItem library={item} />
謝謝丹,您把我放在正確的位置上。 我用了
renderItem = {({{item})=> this.renderItem(item)}
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.