Javascript 将本机平面列表拉至刷新而不显示

我正在拉平面列表和刷新标题。在执行时，微调器不会出现。请告诉我我要修什么。我们需要使用刷新控制吗

环境

react本机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> 

类列表滑动扩展组件{
建造师（道具）{
超级（道具）；
this.state={keywords:，isLoading:true，results:[]，oldresults:[]，isFetching:false}
}
componentDidMount（）{
返回获取（'https://reactnativecode.000webhostapp.com/FruitsList.php')
.then（（response）=>response.json（））
.然后（（responseJson）=>{
这是我的国家({
孤岛加载：false，
isFetching:false，
结果：responseJson，
结果：responseJson
},...
makeRemoteRequest（）{
....
}
handleRefresh=（）=>{
this.setState（{isFetching:true}，function（））{
这是makeRemoteRequest（）
});
}
....
关键词：{this.state.Keywords}
{this.state.loading(
)：item.id}
renderItem={（{item}）=>{
返回
{item.fruit_name}
}}  
刷新={this.state.isFetching}
onRefresh={this.handleRefresh}
onRefresh={（）=>this.onRefresh（）}
/> }

请检查下面的代码并像这样执行

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>
        )
        }
}

import React，{Component}来自'React'；
从“react native”导入{FlatList、ListView、Text、TouchableOpacity、View、ScrollView、RefreshControl、StatusBar}；
导出默认类示例扩展组件{
建造师（道具）{
超级（道具）
此.state={
刷新：错，
}
}
_onRefresh=（）=>{
this.setState（{刷新：true}）；
}
render（）{
报税表（
)
}
}

**代表flatlist中要刷新的pull的示例代码。请相应修改**

 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'
            }
          });

import React，{Component}来自“React”
从“react native”导入{文本、平面列表、维度、图像、TouchableHighlight}
导出默认类Home extends组件{
建造师（道具）
{
超级（道具）；
此.state={
数据：[]，
性别：“，
isFetching:false，
}
}
组件willmount（）
{
this.searchRandomUser（）
}
onRefresh（）{
this.setState（{isFetching:true}，function（）{this.searchRandomUser（）}）；
}
searchRandomUser=async（）=>
{
const RandomAPI=等待取数（'https://randomuser.me/api/?results=20')
const APIValue=wait RandomAPI.json（）；
const APIResults=APIValue.results
console.log（APIResults[0]。电子邮件）；
这是我的国家({
数据：API结果，
isFetching:错误
})
}
render（）{
返回(
重新加载数据
这是一个.onRefresh（）}
刷新={this.state.isFetching}
keyExtractor={（项，索引）=>index.toString（）}
renderItem={（{item}）=>
电子邮件Id:{item.Email}
全名：{this.state.gender}{item.Name.first}{item.Name.last}
出生日期：{item.dob.age}
电话号码：{item.Phone}
}
/>
)
}
}
const deviceWidth=Dimensions.get（'window'）.width
const deviceHeight=维度.get（'window'）.height
const styles=StyleSheet.create({
容器：{
弹性：1，
对齐项目：“居中”，
为内容辩护：“中心”，
玛金托普：22
},
ContainerView：
{
//背景颜色：'灰色'，
marginBottom:20，
填充垂直：10，
背景颜色：'#f5'，
边框底部宽度：0.5，
borderBottomColor:“灰色”，
宽度：设备宽度-40，
marginLeft:20，
marginRight:20，
玛金托普：20，
flexDirection:“行”
}
});

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

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

---

已工作。添加

enabled={true}

刷新控件={
}

在ScrollView中添加refreshControl，如refreshControl={}如果有人可能犯了我的错误，请注意“refreshControl”属性-它需要小写字母“r”您不应该将Flatlist放在ScrollView中。Flatlist针对大数据进行了优化；它会在需要时呈现项目并释放RAM。将其放在ScrollView下会消除所有优化。请阅读此处：

import { RefreshControl } from 'react-native';