FlatList 根本不显示标题标签

Question

我是 react-redux 的新手，目前正在尝试构建一些堆栈应用程序，它只是某种类型的菜单，其中包含带标题的部分，当按下标题时，它会显示一些关于它的简单文字。所以我使用 Flatlist 来渲染所有这些部分，并且渲染效果非常好。它正好呈现 9 个部分，这是我当前 objects 的数量，这意味着它可以访问数据，加上当我尝试更改这些部分必须显示的标题的字体大小时， sections 也发生了变化，这意味着它肯定也可以访问标题字符串，但由于某种原因，文本根本没有显示出来。外观如下：

我试过更改文本颜色、更改大小、更改背景颜色、添加一些填充，但部分仍然没有显示文本。

下面是我实现 FlatList 的地方：

import React, { Component } from 'react';
import { FlatList } from 'react-native';
import { connect } from 'react-redux';
import ListItem from './ListItem';

class LibraryList extends Component {
    renderItem(library) {
        return <ListItem library={library} />;
    }

    render() {
        console.log(this.props.libraries);
        return (
            <FlatList
             data={this.props.libraries}
             renderItem={this.renderItem}
             keyExtractor={(library) => library.id.toString()}
            />
        );
    }
}

const mapStateToProps = state => {
    return { libraries: state.libraries };
};

export default connect(mapStateToProps)(LibraryList);

这里我自己实现了这个部分：

import React, { Component } from 'react';
import { Text } from 'react-native';
import { CardSection } from './common';


class ListItem extends Component {
     render() {
        const { titleStyle } = styles;
        return (
            <CardSection>
                <Text style={titleStyle}>
                    {this.props.library.title}
                </Text>
            </CardSection>
        );
    }
}

const styles = {
    titleStyle: {
        color: 'black',
        fontSize: 20,
        fontWeight: '600',
    }
};

export default ListItem;

下面是该部分本身的代码：

import React from 'react';
import { View } from 'react-native';

const CardSection = (props) => {
  return (
    <View style={styles.containerStyle}>
      {props.children}
    </View>
  );
};

const styles = {
  containerStyle: {
    borderBottomWidth: 1,
    padding: 5,
    backgroundColor: '#fff',
    justifyContent: 'flex-start',
    flexDirection: 'row',
    borderColor: '#ddd',
  }
};

export { CardSection };

预期结果是标题出现在这 9 个部分中。

Answer 1

在 ListItem 中，将文本组件中的 {this.props.library.title} 替换为 {this.props.library.item.title}。

FlatList 根本不显示标题标签

FlatList doesn't show title tags at all

javascript

android-studio

react-native

react-redux

react-native-flatlist