时间戳

首页 > 解决方案 > 如何在代码之间使用 ActivityIndi​​cator？

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

问题描述

我有一个非常简短的问题要问你。我不明白为什么。因为我是 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>

标签： javascriptreactjsreact-native

解决方案

您Text的组件不接受ActivityIndicator作为子组件...但是您Text的组件内部可能有一个嵌套的 Text 组件

这就是为什么这条线不起作用：

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

这会起作用：

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

推荐阅读