我正在搜索如何在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}
/>
}
/>
);
}
}
我想使此代码适合我的页面:(在我的页面中,有一个表单,我在其中输入信息以获取结果)我想在刷新页面时返回到页面,然后再获取结果:
这是我写信息之前的页面:
获得结果后有我的页面
这是我的代码(希望有人帮助我)
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>
);
}
}