0

透明な色を持ち、React-Native で私が作成したコンポーネントをグローバルなActivityIndi​​catorとして使用する機会はありますか?

詳細：

  • 私は redux ストアを使用して UI を更新します。そこで、ストアを更新して ActivityIndi​​cator を表示するつもりです。
  • ActivityIndicatorname のコンポーネントを作成しましたActIndicator。
  • アプリを含むメインAppコンポーネントがあります。
  • とRootコンポーネントをラップするコンポーネントがActIndicatorありAppます。

コンポーネントのrenderメソッドの最終的なコードは次のようになります。Root

render() {

    if (this.state.showActivityIndicator) {
        return(
            <ActIndicator>
                <App />
            </ActIndicator>
        )
    }

    return (</App>)

}

いくつかの方法を試しましたが、うまくいきません。

脳が止まっているのでしょう。

また、ロジックエラーの可能性もあると思います。

4

2 に答える 2

0

私はあなたが App を子供として渡すことになっているとは思わない.私がそれを使う方法は次のようなものです:

render() {

if (this.state.showActivityIndicator) {
    return(
      <View>
        <ActivityIndicator />
        <App />
      </View>
    )
}

return (<App />)

}

しかし、おそらく次のように設定する方が良いでしょう：

render() {
  return (
    <View>
      <ActivityIndicator animating={this.state.showActivityIndicator} />
      <App />
    </View>
  )
}
于 2017-01-09T18:29:02.503 に答える
0 
const withLoadingOverlay = (Component) => class withLoadingOverlayView extends React.Component {   props: withLoadingOverlayProps

    // Indicator view styles   loadingOverlay = (style) => (
        <View style={[style, styles.someDefaultStyles]}>
          <ActivityIndicator color={someColor} size="large" />
        </View>   )

      render() {
        const { pending, ...passProps } = this.props;
        const { width, height } = Dimensions.get('window');
        return (
          <View style={{ flex: 1 }}>
            <Component {...passProps} />
            {pending && this.loadingOverlay({ width, height })}
          </View>
        );   } };

以前はコンテナ全体を HOC でラップし、redux アクションを使用して開始保留中のプロップを true に設定し、成功または失敗時に false に設定していたため、このプロップは HOC によって消費され、保留中が true に設定されている場合にのみインジケーターが表示されます。

コンテナでは、接続でコンポーネントをラップする必要があります

export default connect(
  (state) => ({ 
    pending: state.reducer.pending, // pending prop should be here
  }),
  (dispatch) => ({ dispatching redux actions })
)(withLoadingOverlay(WrappedComponent));
于 2017-01-10T08:59:02.793 に答える