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

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>
        );
    }

当 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

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 在 expo 论坛上提供的这个问题的答案

"So I took a look at your code, and your item is being rendered, just with no width so you can’t see it. By adding width: dimensions.fullWidth to your top level View on the MyListItem, it fixes this issue."

"your separator item has a width on it. for one item, there is no separator item rendered, but for more than one, there is. So once a separator item was rendered, it would stretch the flatlist to the width of that separator item."

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

FlatList only visible if there is at least 2 items

javascript

react-native

expo

react-native-flatlist