时间戳

首页 > 解决方案 > 在本机反应中获取数据时如何显示ActivityIndi​​ctor

reactjs - 在本机反应中获取数据时如何显示ActivityIndi​​ctor

问题描述

我有一个带有 PHP 后端（SQL 服务器数据库）的本机应用程序

好吧，正如你在图片中看到的，我有一个表格，用户可以输入月份和年份并搜索 DB 的信息；

我的代码做：

1/ 如果变量设置为 true => 我会得到我的表单

2/ 如果我点击按钮 => 变量变为 false 并显示表单和数据；

我的问题是，当我单击按钮时，需要一些时间才能显示结果，所以在这种情况下，我想添加一个 ActivityIndi​​cator 来表示某些东西正在运行；

单击按钮时

在此处输入图像描述

这是我的代码：

export default class FirstPage extends React.Component {
  constructor(props){
    super(props);
    this.state ={
    isLoading: true,
    dataSource: [],
    month:'',
    year:'',
  }
  }

  afficher = () =>{
    this.setState({
       Loading: false})
   const month = this.state.month;
   const year= this.state.year;
   return fetch('http://192.168.1.2: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"){

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

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


}

标签： reactjsreact-native

解决方案

这是您的代码的更新版本。

    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>
{(this.state.dataSource.length != 0) </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>}
{this.state.loading && 
    <ActivityIndicator/>
}

</ScrollView>
    );

推荐阅读