时间戳

首页 > 解决方案 > 加载项目时加载指示器

react-native - 加载项目时加载指示器

问题描述

我正在制作 react native expo 应用程序。我有显示来自数据库的文章的页面。当我点击文章按钮时，我会转到文章页面。当我单击按钮时，我将文章的所有数据发送到另一个屏幕。我想在显示数据时加载 ActivityIndi​​cator。请帮我代码：

class HomeScreen extends React.Component {

 const { navigate } = this.props.navigation;
    return (

      <SafeAreaView style={styles.MainContainer}>
      <ScrollView
      >



      <ListView
         dataSource={this.state.dataSource}
         renderSeparator={this.ListViewItemSeparator}
         renderRow={rowData => (
           <>
        
                <TouchableOpacity style={{flex:2}}
                activeOpacity={.7}
                onPress={() => navigate('Articles', {
                  otherParam: rowData.article_title,
                  mobile_image: rowData.mobile_image,
                  article_category: rowData.article_category,
                  views: rowData.views,
                  article_content: rowData.article_content
                })}>
             <Image
        source = {{ uri: rowData.mobile_image }}
               style={{resizeMode:'cover',width:null,height:null, flex:1,  borderRadius:4,
                 borderWidth:1,
                 borderColor:'#dddddd'}}
             />

             <Text
             style={styles.textOfArticle}
             >
               {rowData.article_title}
             </Text>

  </TouchableOpacity>
           </>
         )}
       />
       </ScrollView
       >
</SafeAreaView>
    );
  }
}



class ArticleScreen extends React.Component {
  static navigationOptions = ({ navigation, navigationOptions }) => {
    const { params } = navigation.state;

    return {
      title: params ? params.otherParam : '',
    };
  };




 state = { animating: true }


 componentDidMount = () => {
   const { params } = this.props.navigation.state;
      const article_title = params ? params.otherParam : '';
      const mobile_image = params ? params.mobile_image : '';
      const article_category = params ? params.article_category : '';
      const views = params ? params.views : '';
      const article_content = params ? params.article_content : '';
   this.closeActivityIndicator()
 }





  render() {
    const animating = this.state.animating
      return (
         <View style = {styles.container}>
            <ActivityIndicator
               animating = {animating}
               color = '#bc2b78'
               size = "large"
               style = {styles.activityIndicator}/>
         </View>
      )



    return (
      <SafeAreaView>
      <ScrollView>

    <Text>{article_title}</Text>

  </ScrollView>
          </SafeAreaView>
    );

}
}

标签： react-nativeexpo

解决方案

为activityIndi​​cator添加一个布尔值，用于显示或隐藏activityIndi​​cator。

state = {
  showIndicator: true,
}

closeActivityIndicator = () => {
  this.setState({ showIndicator: false });
}

在您的渲染中使用基于showIndicator值的条件渲染

render() {
  const animating = this.state.animating;

  return (
    <SafeAreaView>
      {this.state.showIndicator ? (
        <View style={styles.container}>
          <ActivityIndicator
            animating={animating}
            color="#bc2b78"
            size="large"
            style={styles.activityIndicator}
          />
        </View>
      ) : (
        <ScrollView>
          <Text>{article_title}</Text>
        </ScrollView>
      )}
    </SafeAreaView>
  );
}

推荐阅读