如何根据react native中的屏幕方向更改flatlist的列数和行数？

npm install react-native-orientation

import Orientation from 'react-native-orientation';

componentDidMount() {
  Orientation.addOrientationListener(this.handleOrientationChange);
}

componentWillUnmount() {
  Orientation.removeOrientationListener(this.handleOrientationChange);
}

constructor(props) {
  super(props);
  this.state = {
    numColumns: 2, // 默认列数
    numRows: 3, // 默认行数
  };
}

handleOrientationChange = (orientation) => {
  if (orientation === 'LANDSCAPE') {
    this.setState({
      numColumns: 4, // 横屏时的列数
      numRows: 2, // 横屏时的行数
    });
  } else {
    this.setState({
      numColumns: 2, // 竖屏时的列数
      numRows: 3, // 竖屏时的行数
    });
  }
}

render() {
  const { numColumns, numRows } = this.state;

  return (
    <FlatList
      data={data}
      key={numColumns} // 保证FlatList在列数变化时重新渲染
      numColumns={numColumns}
      renderItem={this.renderItem}
      keyExtractor={this.keyExtractor}
      // 其他FlatList的属性
    />
  );
}