Question

我有一个平面列表，该列表将其数据源作为状态。实际上，这些数据来自firebase，我一直在使用redux。因此，数据是在操作中获取的，然后使用回调将数据声明为状态。

我要实现的是，当从api中找不到数据时，视图中应显示一个空列表消息。实际上，我使用“ ListEmptyComponent”实现了这一点。但是发生的是屏幕以空消息开头，并且微调框加载在其下方，然后，如果找到数据，则消息和微调框一样消失。

但是，我想要的是，渲染视图时，每个人都应该看到的第一件事是微调器，然后，如果隐藏了数据为空的微调器，则显示为空列表消息。

如何实现？

我的动作：

export const fetchOrderHistory = (phone, callback) => {
return (dispatch) => {
    dispatch({ type: START_SPINNER_ACTION_FOR_ORDER_HISTORY })
    firebase.database().ref('orders/'+phone)
    .on('value', snapshot => {
        const snapShotValue = snapshot.val();
        callback(snapShotValue);
        dispatch ({ type: ORDER_HISTORY_FETCHED , payload: snapshot.val()});
        dispatch({ type: STOP_SPINNER_ACTION_FRO_ORDER_HISTORY })
    });

};

};

我的平面列表和微调框：

<FlatList
                        data={this.state.historyOfOrders}
                        keyExtractor={item => item.uid}
                        ListEmptyComponent={this.onListEmpty()}
                        renderItem={({ item }) => (
                            <Card
                            containerStyle={{ borderRadius: 5 }}
                            >
                            <View style={styles.topContainerStyle}>
                                    <View>
                                        <TouchableOpacity
                                        onPress={() => this.props.navigation.navigate('ViewOrderScreen', {itemsOfOrder: item}) }
                                        >
                                            <View style={styles.viewOrderContainer}>
                                            <View style={styles.viewOrderTextContainer}>
                                                <Text style={styles.viewOrderTextStyle}>View Order</Text>
                                            </View>
                                            <Icon 
                                            name='ios-arrow-forward'
                                            type='ionicon'
                                            color='#ff7675'
                                            />
                                            </View>
                                        </TouchableOpacity>
                                    </View>
                                </View>
                            </View>
                        </Card> 
                        )}
                    />

                    {this.props.isSpinnerLoading &&
                    <View style={styles.loading}>
                        <ActivityIndicator size="large" color="#03A9F4"/>
                    </View> }

我在componentWillMount上设置状态的回叫：

 componentWillMount() {
   this.props.fetchOrderHistory((this.props.phone), (snapShotValue)=> {
        const userOrderHistory = _.map(snapShotValue, (val,uid) => ({uid, ...val}))
        this.setState({ historyOfOrders: userOrderHistory })
   });
}

我的EmptyList消息：

onListEmpty = () => {
   return <View style={{ alignSelf: 'center' }}>
        <Text style={{ fontWeight: 'bold', fontSize: 25 }}>No Data</Text>
    </View>
}

我的状态：

state = { historyOfOrders: "" }

我正在使用mapStateToProps从减速器获取微调器值。

请指导我

Answer 1

您必须为此做两件事。首先，仅在加载程序停止时才显示Flatlist。其次，将this.state.historyOfOrders的默认值设置为null，然后检查this.state.historyOfOrders是否不为null，然后仅显示Flatlist。

这是一个代码：

{(!this.props.isSpinnerLoading && this.state.historyOfOrders != null) ? 
    (
    <FlatList
        data={this.state.historyOfOrders}
        keyExtractor={item => item.uid}
        ListEmptyComponent={this.onListEmpty()}
        renderItem={({ item }) => (
            <Card containerStyle={{ borderRadius: 5 }}>
                <View style={styles.topContainerStyle}>
                    <View>
                        <TouchableOpacity onPress={() => this.props.navigation.navigate('ViewOrderScreen', {itemsOfOrder: item}) }>
                            <View style={styles.viewOrderContainer}>
                                <View style={styles.viewOrderTextContainer}>
                                    <Text style={styles.viewOrderTextStyle}>View Order</Text>
                                </View>
                                <Icon 
                                name='ios-arrow-forward'
                                type='ionicon'
                                color='#ff7675'
                                />
                            </View>
                        </TouchableOpacity>
                    </View>
                </View>
            </Card> 
        )}
    /> 
    ) : null
}

在这种情况下，即使您希望加载程序位于Flatlist之上，您也可以这样做。

Answer 2

您应该采取的路径是，在设置了加载标志时仅呈现微调器，而在加载标志为false时呈现列表。您的渲染方法应如下所示

render()
{

   if(this.props.isSpinnerLoading)
   {
       return (<View style={styles.loading}>
                        <ActivityIndicator size="large" color="#03A9F4"/>
                    </View> );
   }

   return (/** Actual List code here **/);
}

仅在使用平面列表在React Native中终止Loader后才显示空列表消息

2 个答案: