React-NativeでグローバルActivityIndi​​catorとしてコンポーネントを使用する機会はありますか

Question

コンポーネントを透明な色を持ち、React-Nativeで作成されたグローバルActivityIndicatorとして使用する機会はありますか？

詳細：

• 私はUIを更新するためにReduxのストアを使用しています。だから私はストアを更新してActivityIndi​​catorを表示するつもりです。
• ActivityIndicatorというコンポーネントを作成しました。名前はActIndicatorです。
• 私はアプリを含むメインのAppコンポーネントを持っています。
• ActIndicatorおよびAppコンポーネントをラップするRootコンポーネントがあります。

Root部品のrender方法の究極のコードは次のようになります。

render() { 

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

    return (</App>) 

} 

私はいくつかの方法を試してみたが、私は成功することはできません。

私の脳は停止していると思います。

ロジックミスがあるかもしれません。私はあなたが子供の頃にアプリケーションを渡すことになっているとは思わない

Answer 1

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のアクションと小道具真の成功に保留中の起動時に設定またはfalseに設定して失敗するので、この小道具は、HOCとインジケータによって消費されるだろうペンディング時のみ表示ingはtrueに設定されています。あなたが接続

export default connect(
    (state) => ({ 
    pending: state.reducer.pending, // pending prop should be here 
    }), 
    (dispatch) => ({ dispatching redux actions }) 
)(withLoadingOverlay(WrappedComponent)); 

Answer 2

、私はそれを使用する方法は、より多くのこのようなものです：

render() { 

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

return (<App />) 

} 

が、おそらく、このようにそれを設定する方が良いだろう。

render() { 
    return (
    <View> 
     <ActivityIndicator animating={this.state.showActivityIndicator} /> 
     <App /> 
    </View> 
) 
}