如何在代码之间使用ActivityIndi​​cator？

Question

我有一个非常简短的问题要问您。我不明白为什么。因为我是React Native的新手。对此我感到抱歉。我的英语水平不是很好。

这就是它的工作方式

{ isLoadingCustomer ? <Text style={{ fontSize: 13 }}> Loading.. </Text> : totalCustomer }

但这不是那样的方式

{ isLoadingCustomer ? <ActivityIndicator size="small" color="white" /> : totalCustomer }

那很奇怪。有人知道为什么吗？预先感谢。

    <View style={styles.dashboard}>                    
        <View style={{ flexDirection: 'row', justifyContent: 'space-around' }}>
            <View style={styles.activies}>
                <Text style={{ textAlign: 'center', fontSize: 15, color: 'white', marginTop: -17 }}> Günlük Aktivitelerim </Text>

                <View style={{ flexDirection: 'row', justifyContent: 'space-around', marginTop: -25 }}>
                    <View style={styles.activitiesResult}>
                        <Text style={{ textAlign: 'center', fontSize: 12, color: 'green' }}> Olumlu </Text>
                        { isLoadingPositive ? <Text style={{ fontSize: 11, textAlign: 'center', lineHeight: 40 }}> Yükleniyor.. </Text> : <Text style={styles.textResult}> { totalPositive } </Text> }
                    </View>

                    <View style={styles.activitiesResult}>
                        <Text style={{ textAlign: 'center', fontSize: 12, color: 'red' }}> Olumsuz </Text>                                    
                        { isLoadingPostponed ? <Text style={{ fontSize: 11, textAlign: 'center', lineHeight: 40 }}> Yükleniyor.. </Text> : <Text style={styles.textResult}> { totalNegative } </Text> }
                    </View>

                    <View style={styles.activitiesResult}>
                        <Text style={{ textAlign: 'center', fontSize: 12, color: 'blue' }}> Satış </Text>                                    
                        { isLoadingSale ? <Text style={{ fontSize: 11, textAlign: 'center', lineHeight: 40 }}> Yükleniyor.. </Text> : <Text style={styles.textResult}> { totalSale } </Text> }
                    </View>

                    <View style={styles.activitiesResult}>
                        <Text style={{ textAlign: 'center', fontSize: 12, color: 'black' }}> Ertelenme </Text>                                    
                        { isLoadingNegative ? <Text style={{ fontSize: 11, textAlign: 'center', lineHeight: 40 }}> Yükleniyor.. </Text> : <Text style={styles.textResult}> { totalPostponed } </Text> }
                    </View>
                </View>
            </View>                       
        </View>

        <View style={{ flexDirection: 'row', justifyContent: 'space-around', marginTop: 20 }}>
            <TouchableHighlight activeOpacity={0.4} underlayColor='transparent' onPress={() => this.props.navigation.navigate('Lead')}>
                <View style={styles.leads}>
                    <Text style={{ textAlign: 'center', fontSize: 13, color: 'white', marginTop: 3 }}> Müşteri Adaylarım </Text>

                    <Text style={{ textAlign: 'center', fontSize: 30, fontWeight: 'bold', color: 'white', lineHeight: 45 }}>                                     
                        { isLoadingLead ? <Text style={{ fontSize: 13 }}> Yükleniyor.. </Text> : totalLead }
                    </Text>
                </View>
            </TouchableHighlight>

            <View style={styles.customers}>
                <Text style={{ textAlign: 'center', fontSize: 13, color: 'white', marginTop: 3 }}> Müşterilerim </Text>

                <Text style={{ textAlign: 'center', fontSize: 30, fontWeight: 'bold', color: 'white', lineHeight: 45 }}> 
                    { isLoadingCustomer ? <Text style={{ fontSize: 13 }}> Yükleniyor.. </Text> : totalCustomer }
                </Text>
            </View>
        </View>
    </View>

Answer 1

您的Text组件不接受ActivityIndicator作为子元素...但是您的Text组件中可能包含嵌套的Text组件

这就是为什么此行不起作用的原因：

<Text>{ isLoadingCustomer ? <ActivityIndicator size="small" color="white" /> : totalCustomer }</Text>

这将起作用：

  <View>
      {isLoadingCustomer ? (
        <ActivityIndicator size="small" color="white" />
      ) : (
        <Text>{totalCustomer}</Text>
      )}
    </View>

Answer 2

请尝试以下示例

    </View>
       <View>
             <Text style={Styles.flatListItemText}>Your text here </Text> 
      </View>

    {(this.state.showLoading) ?
                    <ActivityIndicator
                           size="small"
                           color="white" /> : null }
     </View>

使用此更改显示加载状态

 /**
 * 
 * @param {bol} status 
 */
showLoading(status) {
    this.setState({ showLoading: status })
}