FlatList根本不显示标题标签

Question

I'm quite new at react-redux, and currently am trying to build some stack application that will simply be some type of menu that will have it's sections with titles and when pressing the title it will show some simple text about it. So I'm using Flatlist for rendering all these sections, and the rendering works perfectly fine. It renders exactly 9 sections which is the number of my current objects, meaning that it has access to the data, plus when I try to change the font size of the title that these sections have to display, the size of the sections change as well, meaning that it definitely has access to the title strings as well, but for some reason the text is not showing up at all. Here's how it looks:

I tried to change the text color, change size, change background color, add some padding, but section still doesn't show the text.

So here's where I implement the 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);

Here I implement the section itself:

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;

And here's the code for the section itself:

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

Expected result would be for titles to show up in those 9 sections.

Answer 1

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