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

Posted 2023-02-19

【中文标题】FlatList 仅在至少有 2 个项目时才可见

【英文标题】：FlatList only visible if there is at least 2 items

【发布时间】：2019-08-29 04:54:15

【问题描述】：

在我的 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>
        );
    

当symbols只有1项时，列表不渲染，屏幕空白，只出现ALERTS字样

当我将更多项目硬编码到symbols 列表时，它显示所有项目都没有问题。

不确定这是我的代码还是 FlatList 组件的问题

编辑

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

编辑 2

此处提供实时代码 https://snack.expo.io/@zoonosis/ranting-pudding

【问题讨论】：

你会分享renderListItem 吗？

当然，已经编辑了我的问题

你能在snack.expo.io中重现你的错误吗？

好的，已添加零食链接

【参考方案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')
                      )
                    

                />

        );
    

【讨论】：

console.log(this.state.symbols) 行将数组打印到屏幕上

console.log(value.item.symbol,'hel') 行打印符号值加上 hel

你可以说符号只有 1 项，列表不呈现，屏幕为空白，所以我出现单个值

对不起，我不明白

你说当你有一个符号时你没有在屏幕上渲染符号的值并且屏幕是空白的

【参考方案2】：

这是breadboxio在世博论坛上提供的这个问题的答案

“所以我查看了您的代码，并且正在渲染您的项目，只是没有宽度，因此您看不到它。通过将 width: dimensions.fullWidth 添加到 MyListItem 上的***视图，它修复了这个问题。”

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