Question

我在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个部分中。

Answer 1

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

FlatList根本不显示标题标签

1 个答案: