Есть ли шанс использовать компонент в качестве глобального ActivityIndicator на React-Native?

Question

Есть ли шанс использовать компонент в качестве глобального ActivityIndicator, который имеет прозрачный цвет и был создан мной в React-Native?

Подробности:

• Я использую избыточное хранилище для обновления пользовательского интерфейса. Поэтому я намерен показать ActivityIndicator путем обновления магазина.
• Я создал ActivityIndicator компонент с именем ActIndicator,
• У меня есть основной App компонент, который содержит приложение.
• у меня есть Root компонент, который оборачивает ActIndicator а также App компоненты.

Конечный код render метод Root Компонент выглядит следующим образом:

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 и с помощью действия приставки, чтобы установить стартовое ожидание проп, истина и в случае успеха или неудачу установить ложь, так что этот пропиток будет использован HOC, а индикатор будет отображаться, только если ожидание установлено на истину.

В контейнере вы должны обернуть компонент в Connect

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>
  )
}