有機會在React-Native上將組件用作全局ActivityIndi​​cator嗎

Question

是否有機會將組件用作具有透明顏色並由我在React-Native上創建的全局ActivityIndi​​cator ？

細節：

• 我使用redux存儲來更新UI。 因此，我打算通過更新商店來顯示一個ActivityIndi​​cator。
• 我創建了一個名為ActIndicator的ActivityIndicator組件。
• 我有一個包含應用程序的主要App組件。
• 我有一個包裝ActIndicator和App組件的Root組件。

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操作包裝整個容器，以在啟動未決道具設置為true時設置成功，否則將其設置為false，因此該道具將被HOC占用，並且僅當未決設置為true時才會顯示指示器。

在容器中，您必須在連接中包裝組件

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