Как придать SectionList значение flexDirection для строки в React Native - PullRequest
Новая
       40

Как придать SectionList значение flexDirection для строки в React Native

0 голосов
/ 28 сентября 2018

Я хотел бы получить SectionList с работающим flexDirection строки, это код, который у меня есть 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);

он работает и выглядит так SectionList

однако я хотел бы отображать обложки рядом друг с другом, как в сетке.Я получил этот рабочий bevor с методом map, однако я хотел бы изменить это из-за проблем с производительностью из-за отложенной загрузки, может кто-нибудь помочь pls?

...