如何在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方法的帮助，但是由于性能问题（延迟加载），我想更改它，有人可以帮忙吗？