是否有机会在 React-Native 上使用组件作为全局 ActivityIndi​​cator [英] Is there any chance to use a component as a global ActivityIndicator on React-Native

问题描述

是否有机会将组件用作全局ActivityIndi​​cator 哪个有透明颜色并且是我在 React-Native 上创建的?

Is there any chance to use a component as a global ActivityIndicator which has transparent color and had been created by me on React-Native?

详情:

• 我使用 redux store 来更新 UI.所以我打算通过更新商店来显示一个 ActivityIndi​​cator.
• 我创建了一个名为 ActIndicator 的 ActivityIndi​​cator 组件.
• 我有一个包含应用程序的主要 App 组件.
• 我有一个 Root 组件，它包装了 ActIndicator 和 App 组件.

• I use a redux store to update the UI. So I intend to show an ActivityIndicator by updating the store.
• I've created an ActivityIndicator component with name ActIndicator.
• I have a main App component that contains the app.
• I have a Root component that wraps the ActIndicator and App components.

Root组件的render方法最终代码如下:

The ultimate code of render method of Root component looks like the following:

render() {

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

    return (</App>)

}

我尝试了几种方法，但都没有成功.

I've tried several methods but I can not be successful.

我想我的大脑停止了.

我也猜可能有逻辑错误.

I also guess there may be a logic mistake.

推荐答案

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 动作包装整个容器，在启动挂起道具时设置为真，成功或失败时设置为假，因此该道具将被 HOC 消耗，并且仅当设置为待定时才显示指示器真的.

I used to wrap whole container with HOC and with redux action to set on start pending prop true and on success or fail to set on false so this prop will be consumed by HOC and indicator will be displayed only when pending is set on true.

在容器中，您必须将组件包装在连接中

In container you have to wrap component in connect

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

这篇关于是否有机会在 React-Native 上使用组件作为全局 ActivityIndi​​cator的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！