Question

我正在努力拉平板列表并使用标题刷新。当涉及到执行时，微调器不显示。请告诉我我需要解决的问题。我们需要使用刷新控制吗？

环境

react-native-cli：2.0.1

react-native：0.52.0

node：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

**样本代码代表在列表中刷新的拉动。进行相应的修改**

 import React, { Component } from 'react'
        import { Text,FlatList,Dimensions,Image,TouchableHighlight } from 'react-native'

        export default class Home extends Component {

            constructor(props) 
            {
                super(props);
            this.state = {
                data : [],
                gender : "",
                isFetching: false,
            }
            }

        componentWillMount()
        {

            this.searchRandomUser()
        }

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

        searchRandomUser = async () =>
        {
           const RandomAPI = await fetch('https://randomuser.me/api/?results=20')
           const APIValue = await RandomAPI.json();
            const APIResults = APIValue.results
              console.log(APIResults[0].email);
              this.setState({
                  data:APIResults,
                  isFetching: false
              })

        }

          render() {
            return (
              <View style = {styles.container}>
         <TouchableHighlight
         onPressOut = {this.searchRandomUser}
             style = {{width:deviceWidth - 32, height:45,backgroundColor: 'green',justifyContent:"center",alignContent:"center"}}>
                  <Text style = {{fontSize:22,color: 'white',fontWeight: 'bold',textAlign:"center"}}>Reload Data</Text>
             </TouchableHighlight>
         <FlatList
                data={this.state.data}
                onRefresh={() => this.onRefresh()}
              refreshing={this.state.isFetching}
                keyExtractor = { (item, index) => index.toString() }
                renderItem={({item}) =>
                <View style = {styles.ContainerView}>
                <View>
        <Image
        source={{uri : item.picture.large}}
        style = {{height:100,width:100,borderRadius: 50,marginLeft: 4}}
        resizeMode='contain'
        />
        </View>

        <View style = {{flexDirection: 'column',marginLeft:16,marginRight: 16,flexWrap:'wrap',alignSelf:"center",width: deviceWidth-160}}>
        <Text>Email Id : {item.email}</Text>

        <Text>Full Name : {this.state.gender} {item.name.first} {item.name.last}</Text>
        <Text>Date of birth : {item.dob.age}</Text>
        <Text>Phone number : {item.phone}</Text>

        </View>

        </View>
                }
                />
              </View>
            )
          }
        }
        const deviceWidth = Dimensions.get('window').width
        const deviceHeight = Dimensions.get('window').height
        const styles = StyleSheet.create({
            container: {
              flex: 1,
              alignItems: 'center',
              justifyContent: 'center',
              marginTop:22
            },
            ContainerView:
            {
                // backgroundColor:'grey',
                marginBottom:20,
                paddingVertical:10,
                backgroundColor: '#F5F5F5',

                borderBottomWidth:0.5,
                borderBottomColor:'grey',
                width: deviceWidth-40,
                marginLeft:20,
                marginRight:20,
                marginTop:20,
                flexDirection:'row'
            }
          });

Answer 2

因为您在ScrollView中使用了FlatList，然后应该为ScrollView定义刷新，如下所示：

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

别忘了导入RefreshControl：

import { RefreshControl } from 'react-native';

Answer 3

有效。添加enabled={true}

          refreshControl={
            <RefreshControl
              enabled={true}
              refreshing={refreshing}
              onRefresh={onRefresh}
            />
          }

Answer 4

请检查以下代码并按照这样的方式实施。

import React, { Component } from 'react';
import { FlatList, ListView, Text, TouchableOpacity, View, ScrollView, RefreshControl, StatusBar } from 'react-native';

export default class Sample extends Component {
constructor(props) {
        super(props)
        this.state = {
            refreshing: false,
        }
    }

     _onRefresh = () => {
        this.setState({refreshing: true});
    }
     render() {         
        return (  
            <View> 
            <FlatList
                    data={this.props.dataSource}
                    extraData={this.props.dataSource}
                    renderItem={this._renderItem}
                    keyExtractor ={this._keyExtractor}
                    refreshControl={
                        <RefreshControl 
                         refreshing={this.state.refreshing}
                         onRefresh={this._onRefresh}
                        />
                    }
                />
            </View>
        )
        }
}

react-native flat list pull刷新不显示

4 个答案: