reactjs - React Native：为什么在另一个 flatList 的每个项目中渲染一个 flatList 都不能按预期水平工作？

Question

我正在尝试渲染一个平面列表组件，以便该平面列表中的每个项目都是另一个平面列表。

问题是因为我希望两个平面列表都是水平的。

但是，内部平面列表不会在平面列表的每个项目中水平呈现。

这是结果的图像。

代码在这里：

import React, { Component } from 'react';
import { Text, View, FlatList } from 'react-native';

class Box extends Component {

  renderItems = ({ item }) => {
    return (
      <View style={{ height: 50, backgroundColor: 'red', marginBottom: 10 }}><Text>{item.value}</Text></View>
    );
  };

  renderSeparator = () => {
    return <View style={{ width: 10 }} />;
  }
  render() {
    const items = [{ value: 'ONE' }, { value: 'TWO' }, { value: 'THREE' }];

    return (
      <FlatList
        data={items}
        renderItem={this.renderItems}
        ItemSeparatorComponent={this.renderSeparator}
        horizontal
      />
    );
  }
}


export default class Test extends Component {

  renderSeparator = () => <View style={{ width: 20 }} />

  renderItems = ({ item }) => {
    return (
      <View style={{ margin: 10, padding: 20, alignItems: 'center', top: 100, backgroundColor: 'green' }}>
        <View style={{margin: 10}}>
          <Text>
            {item.value}
          </Text>
        </View>
        <Box />
      </View>
    );
  }
  render() {
    const items = [{ value: 'First' }, { value: 'Second' }, { value: 'Third' }, { value: 'Fourth' }];
    return (
      <FlatList
        data={items}
        renderItem={this.renderItems}
        ItemSeparatorComponent={this.renderSeparator}
        horizontal
      />
    );
  }
}

标签： reactjsreact-nativereact-native-ios