Javascript 仅当至少有2项时，平面列表才可见

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

编辑2

现场代码在此可用

render（）{console.log（this.state.symbols）
返回(
项目.符号}
ItemSeparatorComponent={this.renderListSeparator}
renderItem={（值，索引）=>{
返回(
console.log（value.item.symbol，'hel'）
)
}}
/>
);
}

render（）{console.log（this.state.symbols）
返回(
项目.符号}
ItemSeparatorComponent={this.renderListSeparator}
renderItem={（值，索引）=>{
返回(
console.log（value.item.symbol，'hel'）
)
}}
/>
);
}

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

“因此，我查看了您的代码，您的项目正在呈现，只是没有宽度，因此您无法看到它。通过将宽度：dimensions.fullWidth添加到MyListItem的顶级视图，它解决了此问题。”

---

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

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

“因此，我查看了您的代码，您的项目正在呈现，只是没有宽度，因此您无法看到它。通过将宽度：dimensions.fullWidth添加到MyListItem的顶级视图，它解决了此问题。”

---

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

是否共享

renderlitem

？当然，编辑过我的问题你能在snack.expo.io中重新创建你的错误吗？当然，链接到snack added你能分享

renderlitem

？当然，编辑过我的问题你能在snack.expo.io中重新创建你的错误吗？当然，链接到snack added

console.log（this.state.symbols）

行将数组打印到屏幕

console.log（value.item.symbol，'hel'）

行打印符号值加上hel您可以说符号只有一项，列表不呈现，屏幕为空，因此我显示为单值抱歉，我不理解您说当您有一个符号时，您没有在屏幕上呈现符号值，屏幕为空

console.log（this.state.symbols）

行将数组打印到屏幕

console.log（value.item.symbol，'hel'））

line打印符号值加上HEL您可以说符号只有一项，列表不呈现，屏幕为空，因此我显示单个值对不起，我不明白您说当您有一个符号时，您没有在屏幕上呈现符号值，屏幕为空

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

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

                />

        );
    }