web-dev-qa-db-ja.com

React-アニメーションの終了後にNativeActivityIndi​​catorが非表示にならない

ActivityIndi​​catorがあり、フェッチの読み込み中に表示され、componentDidMountのときにホイールが消えます。 -）が発生しますが、レイアウト内のブロックスペースを空のままにします。このコンポーネントをアンマウントする方法を推測していますが、何でもうまくいきました。

私は現在、これらのバージョンで作業しています。

react-native-cli: 2.0.1
react-native: 0.40.0

これは私が使用しているコードの一部です：

import React, { Component } from 'react';
import {
  StyleSheet,
  View,
  ... // Couple more components here
  ActivityIndicator,
} from 'react-native';

import NewsList from './NewsList';

export default class HomeView extends Component {

  constructor(props) {
     super(props);
     this.state = {
       noticias: [],
       animating: true,
     };
   }

componentDidMount(){
    fetchFunction() // My fetch function here
      .then(data => this.setState({ data:data }))
      this.state.animating = false
  }

render() {

    return (
        <View>
            <NewsList data={data} /> // My custom component

            <ActivityIndicator
            animating={this.state.animating}
            style={[{height: 80}]}
            color="#C00"
            size="large"
            hidesWhenStopped={true}
            />
        </View>
    );

  }
}

PS：私はReduxを使用していません。

アニメーションが正常に機能しているActivityIndi​​catorアニメーション化時の空のスペースがfalseに設定されている

react-nativeactivity-indicator
6
vtisnado

コンテンツを条件付きで表示する方法については、JSXの詳細を読むことをお勧めします https://facebook.github.io/react/docs/jsx-in-depth.html

何もロードしていないときは、DOMからActivityIndicatorを完全に削除します

import React, { Component } from 'react';
import { View, ActivityIndicator } from 'react-native';

import NewsList from './NewsList';

export default class HomeView extends Component {
  state = {
    data: [],
    isLoading: true,
  }

  componentDidMount() {
    fetchFunction()
      .then(data => this.setState({ data, isLoading: false }))
  }

  render() {
    const {data, isLoading} = this.state;

    return (
      <View>
        <NewsList data={data} />
        {isLoading && (
          <ActivityIndicator
            style={{ height: 80 }}
            color="#C00"
            size="large"
          />
        )}
      </View>
    );
  }
}
20
Henrik R

コンポーネントを再度レンダリングする場合は、setStateを使用する必要があります。

this.setState({ animating: false })

の代わりに

this.state.animating = false
3
RRikesh