拉刷新本地反应?

时间:2020-03-13 19:24:51

标签: react-native

我正在搜索如何在react native中刷新页面,我找到了这个示例,但我不明白什么是fetchData()。then();

import { ScrollView, RefreshControl } from 'react-native';

class RefreshableList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      refreshing: false,
    };
  }

  _onRefresh = () => {
    this.setState({refreshing: true});
    fetchData().then(() => {
      this.setState({refreshing: false});
    });
  }

  render() {
    return (
      <ScrollView
        refreshControl={
          <RefreshControl
            refreshing={this.state.refreshing}
            onRefresh={this._onRefresh}
          />
        }
      />
    );
  }
}

我想使此代码适合我的页面:(在我的页面中,有一个表单,我在其中输入信息以获取结果)我想在刷新页面时返回到页面,然后再获取结果:

这是我写信息之前的页面:

enter image description here

获得结果后有我的页面

This is my page before writing infos

这是我的代码(希望有人帮助我)

  afficher = () =>{
    this.setState({
       Load: false})
   const month = this.state.month;
   const year= this.state.year;
   return fetch('http://192.168.1.4:80/netOne/fetch.php',{
   method:'post',
   header:{
   'Accept':'application/json',
   'Content-type' :'application/json'
   },
   body:JSON.stringify({mois:month,annee:year})})
     .then((response) => response.json())
     .then((responseJson) => {
if(responseJson=="null"){
 this.setState({ isLoading: true,
 })
 }
else {this.setState({
   isLoading: false,
   dataSource: responseJson,});}}
       )
     .catch((error) =>{console.error(error);});

     this.setState({
     month:'',
     year:'',})
 }



  render() {

    if(this.state.isLoading){
    return(
      <View style={{flex: 1}}>
      <View style={{alignItems: 'center' }}>
      <View style={{marginTop:30,width:Dimensions.get("window").width*0.8,backgroundColor:'#ffffff',height:150}}>
      <Text style={{marginTop:20,marginLeft:20,color:'grey'}}> Month :</Text>
      <TextInput placeholder="Enter value" style={{marginLeft:20,paddingLeft:5,marginRight:20,borderBottomColor: '#f2f2f2',borderBottomWidth: 1,}} onChangeText= {month=>this.setState({month})}/>
      <Text style={{marginTop:20,marginLeft:20,color:'grey'}}> Year :</Text>
      <TextInput placeholder="Enter value" style={{marginLeft:20,marginRight:20,paddingLeft:5,borderBottomColor: '#f2f2f2',borderBottomWidth: 1,}} onChangeText= {year=>this.setState({year})}/>
      </View>
      <TouchableOpacity style={{borderRadius:12,width:Dimensions.get("window").width*0.8,backgroundColor:'#ff9900',height:50,marginTop:10}} onPress={this.afficher}>
        <Text style={{marginTop:15,color:'white',textAlign:'center',fontSize:14}}>Afficher</Text>
        </TouchableOpacity>
     </View>
     </View>
)}
else {
    return (
      <ScrollView style={{ flex: 1,backgroundColor:'#f2f2f2'}}>
      <View style={{alignItems: 'center' }}>
      <View style={{marginTop:30,width:Dimensions.get("window").width*0.8,backgroundColor:'#ffffff',height:150}}>
      <Text style={{marginTop:20,marginLeft:20,color:'grey'}}> Month :</Text>
      <TextInput placeholder="Enter value" style={{marginLeft:20,paddingLeft:5,marginRight:20,borderBottomColor: '#f2f2f2',borderBottomWidth: 1,}} onChangeText= {month=>this.setState({month})}/>
      <Text style={{marginTop:20,marginLeft:20,color:'grey'}}> Year :</Text>
      <TextInput placeholder="Enter value" style={{marginLeft:20,marginRight:20,paddingLeft:5,borderBottomColor: '#f2f2f2',borderBottomWidth: 1,}} onChangeText= {year=>this.setState({year})}/>
      </View>
      <TouchableOpacity style={{borderRadius:12,width:Dimensions.get("window").width*0.8,backgroundColor:'#ff9900',height:50,marginTop:10}} onPress={this.afficher}>
      <Text style={{marginTop:15,color:'white',textAlign:'center',fontSize:14}}>Afficher</Text>
      </TouchableOpacity>
</View>
        <View style={{ paddingLeft:10 ,paddingTop:10 ,paddingBottom:10}}>
      <View  style={{ flexDirection:'row' }}>
      <Text  style={styles.head}> Client </Text>
      <Text  style={styles.head1}>Mois</Text>
      <Text  style={styles.head2}>Annee</Text>
      <Text  style={styles.head3}>ChiffreAffaire</Text>
      </View>
      <FlatList
      data={this.state.dataSource}
      renderItem={({item}) =><Item title={item.M500_NOM} title1={item.Mois} title2={item.Annee} title3={item.ChiffreAffaire}/>}
      ListEmptyComponent={this._listEmptyComponent}
      keyExtractor={(item, index) => index.toString()}

      />
      </View>

</ScrollView>
    );
  }
}

0 个答案:

没有答案