画面サイズが変更されたときのFlatListの強制再レンダ

Question

レスポンシブなネイティブアプリを作成したいと考えています。私はこれを使用して、コンテナ内の変更をディメンションにサブスクライブ：

const RCTDeviceEventEmitter = require("RCTDeviceEventEmitter"); 

export interface Props { 
    data: Array<any>; 
} 

export interface State {} 

class MyContainer extends React.Component<Props, State> { 

    _updateIfSelected() { 
     if (...some more logic...) { 
      this.forceUpdate(); 
     } 
    } 

    constructor(props) { 
     super(props); 
     this.state = { 
      listener: null, 
      updateIfSelected: this._updateIfSelected.bind(this), 
     }; 
    } 

    componentWillMount() { 
     this.setState({ 
      listener: RCTDeviceEventEmitter.addListener("didUpdateDimensions", this.state.updateIfSelected), 
     }); 
    } 

    componentWillUnmount() { 
     this.state.listener.remove("didUpdateDimensions",this.state.updateIfSelected); 
    } 

    renderItem() { 
     console.log("Rerendering Item") 
     return <Text style={{ width: Dimensions.get("window").width }} >Some Text</Text> 
    } 

    render() { 
     return (
      <FlatList 
       data={this.props.data} 
       keyExtractor={(_, i) => (i.toString())} 
       renderItem={({item}) => this.renderItem(item)} 
      /> 
    } 
} 

私は外観は画面が傾いているときに変更する必要があるため、そのアイテムを再度レンダリングするFlatListを強制的にどのように思っていました。ただし、データは変更されないので、リストは画面傾斜で再レンダリングされません。

ドキュメントはextraDataというパラメータ提供：

By passing extraData={this.state} to FlatList we make 
sure FlatList itself will re-render when the state.selected 
changes. 
Without setting this prop, FlatList would not know it 
needs to re-render any items because it is also a 
PureComponent and the prop comparison will not show any changes 

をしかし、私は本当にこれが言おうとしているのか理解していません。 Dimensionの変更でFlatList Rerenderをどのように作成することができますか？

Answer 1

onLayoutに関数を渡して、onLayoutが呼び出されたときに寸法をチェックすることができます。関数を親ビューに渡すことをお勧めします。関数内で状態を設定することができます

class MyComponent extends Component { 
    _onLayout() { // I haven't tried this but I think this or something similar will work 

    const { width, height } = Dimensions.get('window'); 

    if(width > height) { 
     this.setState(state => ({ ...state, orientation: 'landscape' })); 
    } else { 
     this.setState(state => ({ ...state, orientation: 'portrait' })); 
    } 
    } 
    render() { 
    return (
     <View onLayout={this._onLayout}> 
     <FlatList 
     data={this.props.data} 
     keyExtractor={(_, i) => (i.toString())} 
     renderItem={({item}) => this.renderItem(item)} 
     extraData={this.state.orientation} 
     /> 
     </View> 
    ) 
    } 
}