react-native - 如何在 React Native 中为 SectionList 赋予“row”的 flexDirection

Question

我想获得一个具有行工作的 flexDirection 的 SectionList，这是我的 atm 代码：

const { width, height } = Dimensions.get('window');
// Amount of posters in a row
const columns = 3;

class Posters extends Component {
  _renderItems = ({ item, index }) => {
    return (
      <TouchableOpacity
        style={styles.container}
        onPress={() => this._getMovieInfo(item.hasPerformances[0].filmId)}
        key={index}
      >
        <View style={styles.imageContainer}>
          <Image source={{ uri: item.posterUrl }} style={styles.image} />
        </View>
        <Text style={styles.title} numberOfLines={1}>{item.title}</Text>
      </TouchableOpacity>
    );
  }

  _getMovieInfo(url) {
    this.props.movieDataChanged(url);
    this.props.popupChanged(true);
  }

  _renderSections(array) {
    return (
      <SectionList
        style={{ alignSelf: 'flex-start', flexDirection: 'row' }}
        renderItem={this._renderItems}
        renderSectionHeader={({ section: { name } }) => (
          <View style={{ width, maringBottom: 8 }}>
            <Text style={styles.releaseStyle}>{name}</Text>
          </View>
        )}
        sections={array}
        keyExtractor={(item, index) => item + index}
      />
    );
  }

  render() {
    return (
      <View style={{ flexDirection: 'row', flexWrap: 'wrap' }}>
        {
          this.props.posterData
            ? this._renderSections(this.props.posterData)
            : <View style={styles.loadingStyle}><ActivityIndicator size="small" color={colors.typography} /></View>
        }
      </View>
    );
  }
}

export default connect(null, { movieDataChanged, popupChanged })(Posters);

它有效，看起来像这样

但是我想像网格一样显示彼此相邻的封面。我用 map 方法得到了这个工作，但是由于性能问题和延迟加载，我想改变它，有人可以帮忙吗？