时间戳

首页 > 解决方案 > FlatList 根本不显示标题标签

javascript - FlatList 根本不显示标题标签

问题描述

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

在此处输入图像描述

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

所以这里是我实现 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 个部分中。

标签： javascriptandroid-studioreact-nativereact-reduxreact-native-flatlist

解决方案

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

推荐阅读