React爲可滑動視圖計算視圖寬度和高度

我想要計算具有Appbar和Tab的可滑動視圖的視圖寬度和高度。我有代碼工作，但我已經使用vh和vw參數，我不確定在iOS的支持。有一個更好的方法嗎。React爲可滑動視圖計算視圖寬度和高度

你可以在這裏找到整個應用程序，你可以建議，如果有任何其他方式在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

來源

2017-10-08 Sourav Chatterjee