html - react 计算可滑动 View 的 View 宽度和高度

Question

我正在尝试计算具有应用栏和选项卡的可滑动 View 的 View 宽度和高度。我有可用的代码，但我使用了 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(浏览器)中使用 vw 和 vw 对我来说效果很好。如果您想尝试替代方案，也许使用 window.innerHeight() 可能会有所帮助。