0

这是我的render()方法

render() {
    let { enableGo } = this.props;
    console.log("value enable go", enableGo);
    let { activeTab } = this.state;
    let toastText;
    let showToast;
    switch (enableGo) {
      case true:
        showToast = true;
        toastText = "Signup Completed!";
        break;
      case false:
        toastText = "Signing up...Please wait";
        showToast = true;
        break;
    }
....

我正要显示和隐藏<View/>基于enableGo的道具

  {showToast && (
              <View
                style={{
                  borderRadius: scale(20),
                  width: scale(150),
                  alignItems: "center",
                  justifyContent: "center",
                  height: verticalScale(25),
                  flexDirection: "row",
                }}
              >
                <Text style={{ color: 'red', fontSize: 12 }}>
                  {toastText}
                </Text>
                {!toastText === "Signup Completed" && (
                  <Spinner color='red' size="small" />
                )}
              </View>
            )}
....

我最终<View/>在文本更改后没有隐藏，并且showToast变成undefined.

如何使文本先更改，然后延迟隐藏视图？

4

1 回答 1

2

您不需要 showToast 变量，因为您可以仅使用 enableGo 有条件地渲染。也有条件地使用 enableGo inside 更改文本。将整个视图包装在另一个视图中，并将微调器放置在父视图中。为子视图添加 setInterval。我想这将解决问题。

于 2020-05-07T19:34:54.190 回答