Question

在我的Expo应用程序中，我创建了一个平面列表，该平面列表从符号中获取信息符号的值只是硬编码如下

constructor(props) {
        super(props)
        this.state = {
            symbols: [{"symbol": "1816ABC","Name": "Some data","icon": "md-star-outline"}],
        }
    }

这是我的渲染功能

render() {
        if (!this.state.fontLoaded) {
            return <Expo.AppLoading />;
          }
        return (
            <View style={styles.mainContainer}>
                <View style={{paddingVertical: padding.med,alignItems: 'center'}}>
                    <Text style={styles.headerText}>
                        ALERTS
                    </Text>
                </View>

                <FlatList
                    data={this.state.symbols}
                    extraData={this.state.symbols}
                    keyExtractor={(item, index) => item.symbol}
                    ItemSeparatorComponent={this.renderListSeparator}
                    renderItem={this.renderListItem}
                    onRefresh={() => this.onPullToRefresh()}
                    refreshing={this.state.isFetching}
                />
            </View>
        );
    }

当符号只有一项时，列表不会呈现，并且屏幕为空白，仅显示单词ALERTS

当我将更多项目硬编码到symbols列表中时，它会毫无问题地显示所有项目。

不确定我的代码或FlatList组件是否有问题

编辑

renderListItem = ({ item, index }) => {
        return (
            <TouchableOpacity
                onPress={() => this.onPressListItem(index)}
            >
                <MyListItem
                    item={item}
                />
            </TouchableOpacity>
        )
    }

编辑2

可在此处获得实时代码 https://snack.expo.io/@zoonosis/ranting-pudding

Answer 1

render() {    console.log(this.state.symbols)
        return (
           <FlatList
                    data={this.state.symbols}
                    extraData={this.state.symbols}
                    keyExtractor={(item, index) => item.symbol}
                    ItemSeparatorComponent={this.renderListSeparator}
                    renderItem={(value,index)=>{
                      return(
                        console.log(value.item.symbol,'hel')
                      )
                    }}

                />

        );
    }

Answer 2

这是博览会论坛上Breadboxio提供的针对此问题的答案

“所以我看了看您的代码，然后呈现了您的项目，只是没有宽度，所以您看不到它。通过在MyListItem的顶级视图上添加width：Dimensions.fullWidth，它可以修复这个问题。”

“您的分隔项上有一个宽度。对于一个项目，没有呈现任何分隔项，但是对于多个项目，则存在一个分隔项。因此，一旦呈现了一个分隔项，它将将平面列表拉伸到分隔项。”

FlatList仅在至少有2个项目时可见

2 个答案: