hi im使用带有sagas和redux的react native，我的问题是这个我的代码确实打印了一个包含一些信息的材料的大列表，一切都很好。问题是它加载了整个列表，这让它感觉很低，所以我需要改进这一点，我想打印列表中的10个项目，当用户向下滚动时，它会加载另外10个，所以任何类型的建议都会非常感激
这是我打印列表的代码
class WorkOrdersPage extends Component {
state = {
searched: false,
searchSerialNumber: '',
mockData: [1, 2, 3, 4, 5, 6, 7, 8, 9]
}
componentDidMount() {
const { workOrdersRequest, token } = this.props
workOrdersRequest(token)
}
_renderMockFlatList = () => {
const { listItem, listItemLeft, listItemRightView, listItemRightViewIcon, listItemMockText } = stylesWorkOrders
return (
<FlatList
style={{ opacity: 0.6 }}
data={this.state.mockData}
renderItem={({ item }) => {
return (
<ListItem onPress={() => { }} style={[listItem, { borderColor: '#dadada' }]}>
<Left style={listItemLeft}>
<Thumbnail square large source={Images.noPart} />
<Body>
<Text style={[listItemMockText, { width: 100 }]} />
<Text style={[listItemMockText, { width: 200 }]} />
<Text style={[listItemMockText, { marginBottom: 0, width: 70 }]} />
</Body>
</Left>
<Right>
<View style={listItemRightView}>
<Icon style={listItemRightViewIcon} name="ios-arrow-forward" />
</View>
</Right>
</ListItem>
)
}}
/>
)
}
_renderWorkOrder = ({ item }) => {
const { navigate } = this.props.navigation
let Description = ''
let thumb = Images.noPart
let borderColor = "#dadada"
try {
Description = item.RouteCard[0].PartInfo.Description
} catch (err) { }
if (item.RouteCard && item.RouteCard[0] && item.RouteCard[0].Id >= 2 && item.RouteCard[0].Id <= 10) {
const { Id } = item.RouteCard[0]
thumb = Images.part[Id]
if (Id >= 0 && Id <= 4)
borderColor = '#eb5da4'
if (Id >= 5 && Id <= 7)
borderColor = '#6061aa'
if (Id >= 8 && Id <= 10)
borderColor = '#fe9200'
}
const { listItem, listItemLeft, listItemLeftTextMain, listItemLeftTextSecondary, listItemRightView, listItemRightViewLabel, listItemRightViewDate, listItemRightViewIcon } = stylesWorkOrders
return (
<ListItem onPress={() => navigate('WorkOrderPage', { workOrderId: item.Id })}
style={[listItem, { borderColor }]}>
<Left style={listItemLeft}>
<Thumbnail square large source={thumb} />
<Body>
<Text style={listItemLeftTextMain}>{item.WONum.toUpperCase()}</Text>
<Text style={listItemLeftTextSecondary}>{Description}</Text>
</Body>
</Left>
<Right>
<View style={listItemRightView}>
<Text style={listItemRightViewLabel}>Req. Date: </Text>
<Text style={listItemRightViewDate}>{moment(item.ModifiedDate).format("ll")}</Text>
<Icon style={listItemRightViewIcon} name="ios-arrow-forward" />
</View>
</Right>
</ListItem>
)
}
_renderFlatList = () => {
const { orders, ordersBySerial } = this.props
const data = ordersBySerial.length > 0 && this.state.searched === true ? ordersBySerial : orders
const renderItem = ordersBySerial.length > 0 && this.state.searched === true ? this._renderWorkOrderQuickAccess : this._renderWorkOrder
return (
<FlatList
data={data}
renderItem={renderItem}
ListEmptyComponent={this._renderEmpty}
/>)
}
render() {
const { header, mainBackgroundColor, headerTitle, container } = stylesWorkOrders
const { orders, workOrdersBySerialRequest, token, ordersBySerial } = this.props
const { searchSerialNumber, searched } = this.state
return (
<Container>
<Header style={[header, mainBackgroundColor]}>
<Thumbnail square size={35} source={Images.logo_topBar} />
<Title style={headerTitle}>Work Orders</Title>
</Header>
<Header style={mainBackgroundColor} searchBar>
<Item style={{ borderRadius: 3, paddingLeft: 10, paddingRight: 10 }}>
<Input
placeholder="Type Serial Number"
value={searchSerialNumber}
onChangeText={(text) => this.setState({ searchSerialNumber: text })}
/>
{
searched === true ?
<Icon name="md-close" onPress={() => {
this.setState({ searchSerialNumber: '', searched: false })
}} />
:
<Icon name="ios-search" onPress={() => {
if (searchSerialNumber.length == 0) return false
workOrdersBySerialRequest(token, searchSerialNumber)
this.setState({ searched: true })
}} />
}
</Item>
</Header>
<Content style={container}>
{orders.length === 0 ? this._renderMockFlatList() : this._renderFlatList()}
</Content>
</Container>
);
}
}
我现在没有时间给出完整的答案对不起
每次你在列表末尾时，你都必须使用onEndReachedflatlist道具来加载一些数据(例如，列出facebook应用程序(https://facebook.github.io/react-native/docs/flatlist#onendreached
在谷歌上搜索"分页"概念。这就是你所说的(不是一次返回所有数据(。
state = {
...
currentPage : 0, // we keep a track inside the state on each page we are for pagination
mockData:[]
}
<FlatList
data={this.state.mockData}
keyExtractor={(item, index) => index.toString()}
renderItem={({ item }) => this.renderItem(item)}
initialNumToRender={5} // how many item to display first
onEndReachedThreshold={5} // so when you are at 5 pixel from the bottom react run onEndReached function
onEndReached={() => {
this.handleLoadMore();
}}
/>
handleLoadMore = async() => {
// her you put the logic to load some data with pagination
// for example a service who return the data of the page "this.state.currentPage"
let newData = await myExempleService(this.state.currentPage);
this.setState({
mockData: [ ...mockData , ...newData] , // concat the old and new data together
currentPage : this.state.currentPage +1
})
}