React-Native 平面列表下拉刷新未显示

Question

我正在拉取 flatlist 并刷新标题。在执行时，微调器不会出现。请告诉我我必须解决什么问题。我们需要使用刷新控制吗？

环境

react-native-cli: 2.0.1

反应原生：0.52.0

节点：v8.9.4

class ListSwipe extends Component {

  constructor(props) {
    super(props);
    this.state = { keywords: "", isLoading: true , results:[] , oldresults:[] , isFetching: false }     
  }

  componentDidMount() { 
    return fetch('https://reactnativecode.000webhostapp.com/FruitsList.php')
      .then((response) => response.json())
      .then((responseJson) => {
        this.setState({
          isLoading: false,
          isFetching: false  ,
          results: responseJson,
          oldresults: responseJson
        },...

makeRemoteRequest() {
....
}

handleRefresh = () => {

  this.setState({ isFetching: true }, function() {
    this.makeRemoteRequest()
  });

}


 ....
              <ScrollView style={styles.scroll}>


        <Text> Keywords : {this.state.keywords} </Text>



               {this.state.loading ? (
                <Spinner />
          ) :  <FlatList 
                 extraData={this.state}
                data={this.state.results}
                keyExtractor={(item, index) => item.id}
                renderItem={( {item} ) => {
                    return <ListItem>

                      <Text>{item.fruit_name}</Text>

                  </ListItem>
                  }}  
                  refreshing = {this.state.isFetching}                
                  onRefresh ={this.handleRefresh}
                  onRefresh={() => this.onRefresh()}

         /> }

        </ScrollView> 

Answer 1

因为你在 ScrollView 中使用 FlatList 那么你应该为 ScrollView 定义刷新，像这样：

<ScrollView
      refreshControl={ 
      <RefreshControl 
      refreshing={this.state.isFetching} 
      onRefresh={this.handleRefresh} 
      /> 
      } 
 >
<FlatList ... />
</ScrollView>

不要忘记导入 RefreshControl ：

import { RefreshControl } from 'react-native';