反应原生平面列表如何强制列表项具有相同的高度？

Question

我有一个 React-Native 应用程序，其中使用 FlatList 来显示从服务器获取的项目列表。该列表有 2 列，我需要列表项具有相同的高度。我在渲染列表项的代码周围放置了边框，但列表项的高度不同。我尝试过使用弹性盒设置来使视图填充容器，但我尝试的一切都没有什么区别。

我创建了应用程序的简化版本来说明该问题：

请注意，红色边框区域的高度不同。我需要让它们具有相同的高度。

灰色边框添加在包装负责列表项的组件的视图中，红色边框是负责列表项的组件的根视图。为了清楚起见，请参阅下面的代码。

我无法在应用程序中使用灰色边框，因为我的应用程序显示空框，而负责列表项的组件在呈现自身之前从服务器获取附加信息

此外，我不能使用固定的高度尺寸。

应用项目结构及代码

我的代码以“container.js”结尾的文件从服务器获取数据并将其传递到其匹配的渲染组件的方式进行分割。例如，“MainListContainer”将从服务器获取列表，然后将列表数据传递给“MainList”，“ListItemContainer”将从服务器获取有关单个列表项的附加信息，并将其传递给“ListItem”进行渲染实际项目。我已将此模型保留在我的简化应用程序中，以便它尽可能接近我的实际应用程序。

索引.js

import {AppRegistry} from 'react-native';
import MainListContainer from './app/components/MainListContainer';
import {name as appName} from './app.json';

AppRegistry.registerComponent(appName, () => MainListContainer);

MainListContainer.js

import React from 'react';
import MainList from './MainList';

const data = [
  {id: '1', title: 'Item 1', subtitle: 'A', description: 'This is the first item.'},
  {id: '2', title: 'Item 2', subtitle: 'B', description: 'The Big Brown Fox Jumped over the lazy dogs. The Big Brown Fox Jumped over the lazy dogs.',},
];

const MainListContainer = () => {
  return ( <MainList items={data} /> );
};

export default MainListContainer;

主列表.js

import React from 'react';
import {StyleSheet, FlatList, View} from 'react-native';
import ListItemContainer from './ListItemContainer';

export default class MainList extends React.Component {
  constructor(props) {
    super(props);
    this.state = { numColumns: 2};
    this.renderItem = this.renderItem.bind(this);
  }

  renderItem({item, index}) {
    return (
      <View style={styles.flatListItemContainer}>  <!-- THIS IS WHERE THE GREY BORDER IS ADDED -->
        <ListItemContainer key={index} item={item} />
      </View>
    );
  }

  render() {
    const {items} = this.props;
    const {numColumns} = this.state;

    return (
      <View>
        <FlatList
          data={items}
          renderItem={this.renderItem}
          numColumns={numColumns}
          key={numColumns}
          keyExtractor={(item) => item.id}
        />
      </View>
    );
  }
};


const styles = StyleSheet.create({

  flatListItemContainer: {
    flex: 1,
    margin: 10,

    borderColor: '#ccc',
    borderWidth: 1,
  },

});

ListItemContainer.js

import React from 'react';
import ListItem from './ListItem';

const ListItemContainer = (props) => {
    const { item } = props;

    return (
        <ListItem item={item} />
    );
};

export default ListItemContainer;

ListItem.js

import React from 'react';
import {TouchableHighlight, View, StyleSheet, Image, Text} from 'react-native';

const ListItem = (props) => {
  const { item } = props;

  return (
    <TouchableHighlight
      underlayColor="white"
    >
      <View style={styles.containerView}> <!-- THIS IS WHERE THE RED BORDER IS ADDED -->

        <View style={styles.top_row}>
          <Image style={styles.image} source={require('../images/placeholder.png')} />
          <View style={styles.title_texts}>
            <Text style={{fontWeight:'bold'}}>{item.title}</Text>
            <Text style={{color: 'rgb(115, 115, 115)'}}>{item.subtitle}</Text>
          </View>
        </View>

        <Text>{item.description}</Text>

      </View>
    </TouchableHighlight>
  );
};

export default ListItem;

const styles = StyleSheet.create({
  containerView: {
    padding: 14,

    borderColor: 'red',
    borderWidth: 1,
  },

  top_row: {
    flex: 1,
    flexDirection: 'row',
    marginBottom: 10,
  },

  title_texts: {
    flex: 1,
    flexDirection: 'column',
  },

  image: {
    alignSelf: 'flex-end',
    resizeMode: 'cover',
    height: 40,
    width: 40,
    marginRight: 20
  },

});

我尝试过的

• ListItem.js ：将样式移动到“TouchableHighlight”视图上
• ListItem.js ：添加一个包含“TouchableHighlight”视图的视图并在其中添加样式
• ListItem.js ：在“TouchableHighlight”上添加“alignItems:'stretch'”，将其添加到“containerView”样式，也在描述字段上尝试过
• 与“alignItems”相同，但使用“alignedSelf”代替
• 与“alignItems”相同，但使用“alignedContent”代替
• 尝试在不同的视图（容器、描述）上使用“flexGrow”

Answer 1

您缺少一个非常基本的概念，即为平面列表项目提供固定高度，ListItem.js请尝试height:200在 中设置containerView。让我知道这是否适合你