Question

我正在尝试在方向更改时更改FlatList的numColumns。（例如，对于肖像：numColumns = 2和横向numColumns = 3）

但是对于列表中的每个项目，它需要不同的宽度 enter image description here

我尝试使用Dimensions动态更改每个项目的宽度

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
  }
});

所以它看起来像这样：

in Landscape Mode

Portrait

on Reload

重新加载屏幕正确应用宽度。但我不想重新加载它。它应该在Orientation Change上设置宽度。

有谁知道我该如何解决这个问题？

Answer 1

接近检测设备Oriantation并设置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>}
/>

React-Native Flat List列数取决于屏幕方向

1 个答案: