react-native: 在渲染中通过变量而不是状态来显示隐藏视图(setTimeout)

Question

这是我的 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/> 基于 启用围棋 榰

  {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.

如何让文字先改，再隐藏起来？查看 中的延迟？

Answer 1

你不需要showToast变量，因为你可以只使用enableGo有条件地渲染.在里面使用enableGo也有条件地改变文本.将整个View包裹在另一个View里面，并将spinner放在父View里面.为子View添加setInterval.我想这样就可以解决这个问题。