1
我目前正在使用展會,列表只是最初的罰款,直到我遵循loadMore教程,加載更多的RN不工作,hasMore )函數返回false,而我hasNextPage是真的繼電器現代,加載更多不工作,hasMore()保持返回false
我家的屏幕上有一個記錄列表裏面
這是我家
import Expo from 'expo';
import React, {Component} from 'react';
import {
View,
Text,
ActivityIndicator,
FlatList,
TouchableOpacity
} from 'react-native';
import {
Button
} from 'react-native-elements';
import {
QueryRenderer,
createPaginationContainer,
graphql
} from 'react-relay';
import environment from '../createRelayEnvironment';
import DummyList from '../component/dummyList';
class Home extends Component {
render() {
return(
<QueryRenderer
environment={environment}
query={graphql`
query homeQuery(
$count: Int!
$cursor: String!
) {
viewer {
...dummyList_viewer
}
}
`}
variables= {{
count: 5,
cursor: ''
}
}
render={({error, props, retry}) => {
if(props){
return(
<DummyList {...props} />
);
}
return(
<View style={{flex: 1, justifyContent: 'center', alignItems: 'center'}}>
<ActivityIndicator size="large" />
</View>
);
}}
/>
);
}
}
export default Home;
這是我的內部列表的子組件
```
import Expo from 'expo';
import React, {Component} from 'react';
import {
View,
Text,
FlatList,
TouchableOpacity
} from 'react-native';
import {
createPaginationContainer,
graphql
} from 'react-relay';
class DummyList extends Component {
renderItem(item) {
return(
<View style={{padding: 10}}>
<Text key={item.node.id}>{item.node.title}</Text>
</View>
);
}
_loadMore() {
console.log('this.props.relay.hasMore()', this.props.relay.hasMore());
if(!this.props.relay.hasMore() || this.props.relay.isLoading()){
return;
}
this.props.relay.loadMore(
10,
e => {
console.log('e', e);
}
)
}
render() {
console.log('apa aja nih props-nya', this.props);
return(
<View>
<FlatList
data={this.props.viewer.allDummies.edges}
renderItem={({item}) => this.renderItem(item)}
keyExtractor={(item, index) => item.node.id}
/>
<TouchableOpacity style={{padding: 10}} onPress={() => this._loadMore()}>
<Text>Load More</Text>
</TouchableOpacity>
</View>
)
}
}
export default createPaginationContainer(
DummyList,
{
viewer: graphql`
fragment dummyList_viewer on viewer {
allDummies(first: $count, after: $cursor) @connection(key: "DummyList_allDummies"){
pageInfo{
hasNextPage
}
edges{
cursor
node {
id
title
}
}
}
}
`
},
{
direction: 'forward',
getConnectionFromProps(props) {
console.log('getConnectionFromProps props', props);
return props.viewer;
// return props.user && props.user.feed;
},
getFragmentVariables(prevVars, totalCount) {
return {
...prevVars,
count: totalCount
}
},
getVariables(props, { count, cursor }, fragmentVariables) {
return {
count,
cursor
}
},
query: graphql`
query dummyListQuery(
$count: Int!
$cursor: String
){
viewer{
...dummyList_viewer
}
}
`
}
);
```
我找不到爲什麼我的hasMore()回頭率假的原因,我有1000條記錄供參考,並初步負載5