是否有机会在React-Native上使用组件作为全局ActivityIndi​​cator

Question

是否有机会将组件用作全局ActivityIndicator，它具有透明色并且是由我在React-Native上创建的？

详细信息：

• 我使用redux商店来更新UI。所以我打算通过更新商店来展示一个ActivityIndi​​cator。
• 我创建了一个名为ActivityIndicator的{​​{1}}组件。
• 我有一个包含该应用的主ActIndicator组件。
• 我有一个App组件，用于包装Root和ActIndicator组件。

App组件render方法的最终代码如下所示：

Root

我尝试了几种方法，但我不能成功。

我想我的大脑已经停止了。

我也猜测可能存在逻辑错误。

Answer 1

我不认为你应该像孩子一样通过App，我使用它的方式更像是这样：

render() {

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

return (<App />)

}

但最好像这样设置它：

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

Answer 2

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使用，并且仅当挂起设置为on时才会显示指示符真正。

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

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