Question

我是RN的新手。当我想在屏幕之间导航时，创建此功能：

    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

您可以创建一个自定义组件，将您喜欢的InitCommonControlsEx包裹起来，我以前在生产应用程序中使用过此技术。该按钮具有其自己的状态，可让您在必要时自动显示加载指示器。

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

在屏幕之间导航时加载

1 个答案: