Количество столбцов React-Native Flat List в зависимости от ориентации экрана - PullRequest
Новая
       5

Количество столбцов React-Native Flat List в зависимости от ориентации экрана

0 голосов
/ 22 мая 2018

Я пытаюсь изменить numColumns FlatList при изменении ориентации (например, для портрета: numColumns = 2 и ландшафта numColumns = 3)

Но для каждого элемента в списке требуется разная ширина введите изображениеописание здесь

Я пытался использовать Размеры для динамического изменения ширины каждого элемента 

constructor(props) {
  super(props);
  Dimensions.addEventListener("change", this.updateStyles);
}
componentWillUnmount() {
  Dimensions.removeEventListener("change", this.updateStyles);
}
updateStyles = dims => {
  this.setState({
    viewMode: dims.window.width > 400 ? "landscape" : "portrait"
  });
};

Для стилизации 

const styles = StyleSheet.create({

  listContainer: {
    flex: 1,
    flexDirection: "row"
  },
  landscapeListItem: {
    width: Dimensions.get("window").width / 3 - 20
  },
  portraitListItem: {
    width: Dimensions.get("window").width / 2 - 10
  }
});

Так это выглядит так:

Перезагрузка экрана корректно применяет ширину.Но я не хочу его перезагружать.Он должен установить ширину при изменении ориентации.

Кто-нибудь знает, как я могу решить эту проблему?

1 Ответ

0 голосов
/ 22 мая 2018

Обнаружение приближения устройства Ориентация и установка numColumns. 

 <View onLayout={this._onLayout}>
        {/* Subviews... */}
 </View>

Обработка ориентации хранилища событий включена в state

_onLayout(event){
  const { width, height } = event.layout; //somewhat similar object
  const orientation = (width > height) ? 'LANDSCAPE' : 'PORTRAIT';
  this.setState({orientation})
 }

Сейчас FlatList

<FlatList
  numColumns={this.state.orientation == "LANDSCAPE" ? 3 :2}
  renderItem={({item}) => <Text>{item.key}</Text>}
/>
...