загрузка при переходе между экранами

Question

Я новичок в РН. Когда я хочу перемещаться между экранами, я создаю эту функцию:

    displayScreen2 = () => {
      this.props.navigation.navigate("screen2")
    }

и вызываю ее в onPress={this.displayScreen2} с помощью TouchableOpacity или любого Touchable, когда пользователь щелкает, он должен подождать 1 или 2 секунды, прежде чем отобразить экран. . Итак, я хочу изменить значок Touchable на загрузчик. Это просто, если я использую условный рендеринг, но не знаю, как это сделать сейчас, когда мне нужно изменить свое состояние? Любые предложения?

это мой подход:

        <TouchableOpacity
            style={Styles.topButton}
            onPress= {() => {
              this.setState({loading: 'load'},
                () => {
                  displayScoreListView()
                  // this.setState({loading: 'icone'})
                }
              )
              }}
          >

<Text style={Styles.scoreListButtonTextRed}>{this.state.loading}</Text>

, который не работает, изменение состояния, но визуально не потому, что, если я вернусь к первому экрану, у меня будет «загрузка» в текстовом компоненте

Answer 1

Вы можете создать собственный компонент, обертывающий все, что Touchable вы предпочитаете, я использовал эту технику в своих производственных приложениях раньше. Кнопка имеет собственное состояние, которое позволяет при необходимости автоматически отображать индикатор загрузки.

export class ButtonWorker extends Component {

    state = {
        working: false
    }

    onButtonPress = () => {
        this.setState(
            { working: true }, 
            () => {
                this.props.onPress(this.onWorkFinished);
            }
        );
    }

    onWorkFinished = () => {
        this.setState({ working: false });
    }

    render() {
        return (
            <TouchableOpacity>
                {this.state.working ? (
                    <ActivityIndicator />
                ) : (
                    this.props.children
                )}
            </TouchableOpacity>
        );  
    }
}

А затем использовать ее как обычную кнопку с дополнительными логами c!

export class NavigationScreen extends Component {

    navigate = (done) => {
        // ... Asynchronous logic goes here
        done();
        this.props.navigation.navigate("Screen2");
    }

    render() {
        return (
            <Fragment>
                {/* ... */}
                <ButtonWorker onPress={this.navigate} />
            </Frament>
        );
    }
}