Reactjs 在react native中提取数据时如何显示ActivityIndicator

我有一个带有PHP后端（SQL server DB）的react本机应用程序

正如你们在图片中看到的，我有一个表单，用户可以输入月份和年份，搜索数据库的信息

我的代码是：

1/如果一个变量设置为true=>我将只得到我的表单

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

我的问题是，当我点击按钮时，显示结果需要一些时间，所以在本例中，我想添加一个ActivityIndicator，作为后面有东西在工作的标志

这是我的代码：

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


}

导出默认类FirstPage扩展React.Component{
建造师（道具）{
超级（道具）；
这个州={
孤岛加载：是的，
数据源：[]，
月份：''，
年份：''，
}
}
词缀=（）=>{
这是我的国家({
加载：false}）
const month=this.state.month；
const year=this.state.year；
返回获取（'http://192.168.1.2:80/netOne/fetch.php',{
方法：'post'，
标题：{
“接受”：“应用程序/json”，
“内容类型”：“应用程序/json”
},
正文：JSON.stringify（{mois:month，annee:year}）
.then（（response）=>response.json（））
.然后（（responseJson）=>{
if（responseJson==“null”）{
}
else{this.setState({
孤岛加载：false，
数据源：responseJson，}）；}
)
.catch（（错误）=>{console.error（错误）；}）；
这是我的国家({
月份：''，
年份：''，}）
}
render（）{
if（此.state.isLoading）{
返回(
月份：
this.setState（{month}}/>
年份：
this.setState（{year}}/>
阿菲舍尔
)}
返回(
月份：
this.setState（{month}}/>
年份：
this.setState（{year}}/>
阿菲舍尔
客户
莫伊斯
安妮
奇夫雷法尔
}
ListEmptyComponent={this.\u ListEmptyComponent}
keyExtractor={（项，索引）=>index.toString（）}
/>
);
}
}

这是您的代码的更新版本

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

返回(
月份：
this.setState（{month}}/>
年份：
this.setState（{year}}/>
阿菲舍尔
{（this.state.dataSource.length！=0）
客户
莫伊斯
安妮
奇夫雷法尔
}
ListEmptyComponent={this.\u ListEmptyComponent}
keyExtractor={（项，索引）=>index.toString（）}
/>
}
{this.state.loading&&
}
);

React文档：你好，Anurodh Singh；谢谢你的帮助，但它没有为我工作，也许有语法或代码错误！！！如果你发现了问题，请告诉我！！！