React为可滑动视图计算视图宽度和高度

Question

我想要计算具有Appbar和Tab的可滑动视图的视图宽度和高度。 我有代码工作，但我已经使用vh和vw参数，我不确定在iOS的支持。有一个更好的方法吗。

你可以在这里找到整个应用程序，你可以建议，如果有任何其他方式在CSS中实现相同。

目前代码：

import React, { Component, PropTypes } from 'react' 
import RaisedButton from 'material-ui/RaisedButton' 
import Appbar from 'material-ui/AppBar' 
import { Tabs, Tab } from 'material-ui/Tabs' 
import SwipeableViews from 'react-swipeable-views' 
import FloatingActionButton from 'material-ui/FloatingActionButton' 
import ContentAdd from 'material-ui/svg-icons/content/add' 

class Hello extends Component { 
    constructor(){ 
    this.state = { 
     tabSelected: 0, 
     tabHeight:0 
    } 

    } 
    componentDidMount() { 
    console.log(this.tab) 
    let height = this.tab.height 
    this.setState({tabHeight: height}) 
    console.log(height) 
    } 
    handleChange = value => this.setState({tabSelected: value}) 

    render(){ 

    return(
    <div> 
    <Appbar style={{ 
     backgroundColor: '#3e9bbe', 
     position:'fixed', 
     top:0, 
     left:0, 
     height:60 
    }} 
    title='Static Appbar' 
    /> 
      <div> 
      <Tabs 
       ref={(tab) => this.tab = tab} 
       style={{position:'fixed', 
         top:60, 
         left:0, 
         minheight:'100%', 
         minWidth:'100%'}} 
       onChange={this.handleChange} 
       value={this.state.tabSelected} 
       > 
       <Tab label="Info" value={0} /> 
       <Tab label="Questions" value={1} /> 
       <Tab label="Discussion" value={2} /> 
      </Tabs> 
      </div> 
      <div style={{position:'fixed', top:120, left:0, minWidth:'100%'}}> 
      <SwipeableViews 
       index={this.state.tabSelected} 
       onChangeIndex={this.handleChange}> 
       <div key='Tab1' style={{position:'relative', width:'100%', height:'calc(99vh - 60px - 48px)', overflow:'scroll'}}> 
       <h1>TAB1</h1> 
       <p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus mi vitae iaculis iaculis. Aenean blandit maximus tortor, accumsan lobortis augue ultricies mattis. Cras in gravida lacus. Duis ac purus ex. Sed volutpat diam vitae velit vulputate ullamcorper. Donec interdum id augue quis suscipit. Pellentesque iaculis vulputate lectus, id porttitor mauris mollis in. Sed convallis sapien non eros eleifend condimentum. Etiam dictum vitae nibh sit amet varius. Nam eget interdum tellus. Donec dignissim, tortor id imperdiet ......    
       </p> 
    <FloatingActionButton style={{position:'fixed', bottom:10, right:'calc(30px - 100vw * 1)'}} onClick={() => alert('Tab 2')}> 
     <ContentAdd /> 
    </FloatingActionButton> 
       </div> 
       <div key='Tab3' style={{position:'relative', width:'100%', height:500, overflow:'scroll'}}> 
       <h1>TAB3</h1> 
       <p> 
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum tempus mi vitae iaculis iaculis. Aenean blandit maximus tortor, accumsan lobortis augue ultricies mattis. Cras in gravida lacus. Duis ac purus ex. Sed volutpat diam vitae velit vulputate ullamcorper. Donec interdum id augue quis suscipit. Pellentesque iaculis vulputate lectus, id porttitor mauris mollis in. Sed convallis sapien non eros eleifend condimentum. Etiam dictum vitae nibh sit amet varius. Nam eget interdum tellus. Donec dignissim, tortor id imperdiet egestas, velit lorem interdum purus, nec ultrices ante eros non ligula. 
{+ More} 

       </p> 
    <FloatingActionButton style={{position:'fixed', bottom:10, right:'calc(30px - 100vw * 2'}} onClick={() => alert('Tab 3')}> 
     <ContentAdd /> 
    </FloatingActionButton> 
       </div>        
      </SwipeableViews>    
      </div> 

    </div> 
) 
    } 
} 

export default Hello 

应用实例：

https://stackblitz.com/edit/rmaterialui-playground

Answer 1

使用大众和大众汽车已经到现在工作得很好，我在iOS版（浏览器）。 如果你想尝试一个替代方案，也许使用window.innerHeight（）可能会有所帮助。