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}
/>
}
/>
);
}
}
我想将此代码调整到我的页面:(在我的页面中有一个表单,我可以在其中输入信息以获取结果)我希望在刷新页面时返回我的页面,然后再获取结果:
这是我在写信息之前的页面:
得到结果后有我的页面
这是我的代码(希望有人帮助我)
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>
);
}
}
解决方案
推荐阅读
- r - 有没有办法拆分相关矩阵以仅显示它的某个部分(R)?
- python-3.x - 从列表中的一行中选择一个单词并打印带有单词大写的行
- null - 不在 Presto 与 Spark SQL 的实现中
- angular - 未定义的可观察对象上的异步运算符
- fiware-orion - Orion CB 批量更新和通知限制
- javascript - 如何使用 JavaScript 在 Chrome v78+ 上检测 #enable-force-dark 标志?
- r - 使用数据 ggplot 的子集创建自定义图例
- ios - iOS 13 新的演示样式将状态栏变为轻量级内容
- javascript - 在 Android 上的移动浏览器中向下滚动时,网站不会隐藏地址栏
- android - 在 Android 上找不到符号“EVP_cast5_cbc”