Activity 指标显示在选项卡 1 和选项卡 2 上（我只希望它显示在选项卡 2 上 - 当加载选项卡 2 时）

Question

在下面的代码中，我使用状态创建了 2 个选项卡，以跟踪哪个选项卡可见。

currentTab === 1 & currentTab === 2

我对两者都使用了三元运算符。对于第二个选项卡，如果数据正在加载，我会显示一个 activity 指示符，当数据加载时，它会消失，效果很好。但是 activity 监视器也（连续）显示在选项卡 1 上，即使我没有在第一个三元运算符中使用它，而是在第二个中使用它。有什么建议吗？

<ScrollView style={{flex: 1}}>
                    {this.state.currentTab === 1 ? (
                      <View style={{flex: 1}}>
                          <Avatar
                            marginLeft={20}
                            rounded
                            source={{uri: image}}
                          />
                      </View>
                    ) : null}
                    {this.state.currentTab === 2 &&
                    this.state.metadata != null ? (
                      <View style={{flex: 1, paddingBottom: 20}}>
                        <Text style={styles.sectionHeader}> History</Text>
              
                      </View>
                    ) : (
                      <ActivityIndicator size="large" />
                    )}
                  </ScrollView>

Answer 1

您没有在第一个三进制上使用 AtivityIndicator 但它会显示，因为三元运算符的工作方式如下：isTruthy ? true : false 如果 isTruthy 为真则执行 true，否则执行 false

你的情况

this.state.currentTab === 1 ? (<></>) : null 将 return 你的标签，否则 return 为 null。
this.state.currentTab === 2 && this.state.metadata != null ? (<></>) : (<ActivityIndicator />) 将 return 如果 currentTab 为 2 且元数据不为空，并且 return ActivityIndiciator如果没有。

你的错误在第二个三元运算符。如果 currentTab 不是 2 且元数据为 null，则您正在渲染 ActivityIndicator。

您可以为 ActivityIndicator 创建第二个嵌套三元运算符来解决此问题。

{this.state.currentTab === 2 ? (
  this.state.metadata != null ? (
    <View style={{flex: 1, paddingBottom: 20}}>
      <Text style={styles.sectionHeader}> History</Text>

    </View>
  ) : (
    <ActivityIndicator size="large" />
  )
) : null}

在这种情况下，如果 currentTab 为 2，它将执行嵌套三元，否则 return null。在嵌套的三元组中，如果元数据不为空，它将 return 您的选项卡，如果不是，则 return ActivityIndicator。

Activity 指标显示在选项卡 1 和选项卡 2 上（我只希望它显示在选项卡 2 上 - 当加载选项卡 2 时）

Activity Indicator Showing on Tab 1 as well as Tab 2 ( I only want it to be displayed on tab 2 - when tab 2 is loading)

react-native

conditional-operator

uiactivityindicatorview