在下面的這段代碼中，我使用 state 創建了 2 個選項卡來跟蹤哪個選項卡可見。
currentTab === 1 & currentTab === 2
我對兩者都使用三元運算子。對于第二個選項卡，如果資料正在加載，我會顯示一個活動指示器，并在資料加載完美時消失。然而，活動監視器也會（連續）顯示在選項卡 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>
uj5u.com熱心網友回復：
你沒有在第一個三元上使用 AtivityIndi??cator 但它會顯示，因為三元運算子的作業方式是這樣的：isTruthy ? true : false如果 isTruthy 是真，則執行真，如果不是，則執行假
在你的情況下
this.state.currentTab === 1 ? (<></>) : null如果 currentTab 為 1，將回傳您的選項卡，否則回傳 null。this.state.currentTab === 2 && this.state.metadata != null ? (<></>) : (<ActivityIndicator />)如果 currentTab 為 2且元資料不為空，則將回傳您的選項卡，否則回傳 ActivityIndi??ciator。
您的錯誤在于第二個三元運算子。如果 currentTab 不是 2并且元資料為空，則您正在呈現 ActivityIndi??cator 。
您可以為 ActivityIndi??cator 創建第二個嵌套的三元運算子來解決這個問題。
{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，它將執行嵌套的三元，否則回傳 null。在嵌套的三元組中，如果元資料不為空，它將回傳您的選項卡，否則回傳 ActivityIndi??cator。
轉載請註明出處，本文鏈接：https://www.uj5u.com/yidong/353535.html
標籤：反应原生 条件运算符 uiactivityindicatorview
下一篇：谷歌腳本復制粘貼