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

Question

是否有机会使用我在 React-Native 上创建的具有透明颜色的全局组件 ActivityIndicator？

详情：

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

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

render() {

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

    return (</App>)

}

我试了好几种方法都不能成功

估计是脑子坏了

我也猜测可能是逻辑错误

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 操作来包装整个容器，以在启动时设置挂起的 prop true 和成功或失败设置为 false 这样这个 prop 将被 HOC 消耗并且指示器将仅在挂起时显示设置为真。

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

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