0

我正在处理聊天界面，并希望我的聊天日志项在窗口调整大小时适合屏幕。对于我使用的主列表FlatList，每个单独的项目都是一个单独的组件。

为此，我使用该方法订阅了resizeandfullscreenchange事件，window.addEventLister但在许多情况下仍然无法调整大小，例如离开或进入 macOS 全屏模式时。

还有其他一些我应该订阅或遵循不同方法的活动吗？有没有图书馆可以在一个地方为我提供所有类型的活动？

应要求提供代码片段：

平面列表视图：

export class ChatListItem extends React.Component {

   componentDidMount = () => {
       window.addEventListener("resize", this.forceUpdate);
       window.addEventListener("fullscreenchange", this.forceUpdate);
       //Is there anything wrong with doing it the above way?   
   };

   componentWillUnmount = () => {
       window.removeEventListener("resize", this.forceUpdate);
       window.removeEventListener("fullscreenchange", this.forceUpdate);
   };

   render = () => {
       //My Views which take size using flex:1 / window width and height
   };
}

然而，同一个屏幕有一个输入框（Component由于某种原因我做了一个不同的输入框）并且能够使用相同的逻辑调整大小：

export class ChatInputBox extends React.Component {

   componentDidMount = () => {
       window.addEventListener("resize", this.forceUpdate);
       window.addEventListener("fullscreenchange", this.forceUpdate);
   };

   componentWillUnmount = () => {
       window.removeEventListener("resize", this.forceUpdate);
       window.removeEventListener("fullscreenchange", this.forceUpdate);
   };

   render = () => {
       //My Views which take size using flex:1 / window width and height
   };
}
4

1 回答 1

1

下面是一个监听屏幕调整大小的 Box 组件。

class Box extends React.Component{
     state = {
         width : window.innerWidth
         height : window.innerHeight
     }

     onResize = () => this.setState({width: window.innerWidth, height: window.innerHeight})

     componentDidMount(){
         window.addEventListener('resize', this.onResize)
     }

     componentWillUnmount(){
         window.removeEventListener('resize', this.onResize)
     }  
    render(){
        const { width, height } = this.state 
        return(
            <div 
                style={{width, height, backgroundColor: 'red}}
            />
        )
    }
}
于 2019-05-23T12:29:17.430 回答