如何让 react native web 全高？答案

【问题标题】：how to make react native web full height?如何让 react native web 全高？
【发布时间】：2017-12-26 09:21:17
【问题描述】：

我正在使用 React Native Web 库，但我无法在 Web 上实现全高度

代码：

import React from 'react';
import {StyleSheet, View, Text, TouchableOpacity} from 'react-native';

class index extends React.Component {

    render() {
        return (
            <View style={styles.container}>

                <TouchableOpacity
                    style={{
                    backgroundColor: 'blue'
                }}>
                    <Text style={{
                        color: 'green'
                    }}>Learning</Text>
                </TouchableOpacity>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        width: '100%',
        height: '100%',
        margin: 0,
        padding: 0,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red'
    }
})

export default index;

chrome浏览器的结果：

【问题讨论】：

标签： react-native react-native-flexbox react-native-web

【解决方案1】：

解决我的问题的是位置属性

position:'absolute' 或 position:'fixed'

相对不工作position:'relative'

【讨论】：

【解决方案2】：

React Native 不理解视口单元。我们可以使用 react-native 提供的Platform API。

如果您在使用 react-native-web 时想要移动设备和网络的全高，请尝试此方法。

<View style={styles.fullHeight}>
  <Text>Hey there</Text>
</View>

CSS 代码

const styles = StyleSheet.create({
  fullHeight: {
    height: Platform.OS === 'web' ? '100vh' : '100%'
  }
})

或

const styles = StyleSheet.create({
   fullHeight: {
     ...Platform.select({web: {height: '100vh'}, default: {height: '100%'}})
   }
})

【讨论】：

此解决方案优于Dimensions.get("window").height 解决方案，因为它在调整浏览器窗口大小时有效。

【解决方案3】：

flex: 1 和 height: "100%" 适用于 react-native-web 的移动版本，但不适用于 web。 Dimensions.get("window").height - 对两个版本都适用。

【讨论】：

【解决方案4】：

试试下面的

 container: {
        flex: 1
        width: '100%',
        height: '100%',
        margin: 0,
        padding: 0,
        justifyContent: 'center',
        alignItems: 'center',
        backgroundColor: 'red'
    }

【讨论】：

【解决方案5】：

您可以为此使用视口单位。如果您希望他们在 react-native 上使用，您需要：

npm install react-native-viewport-units --save

https://www.npmjs.com/package/react-native-viewport-units

你可以这样做。

var {vw, vh, vmin, vmax} = require('react-native-viewport-units');

<View style={{width:100*vw}}/>

【讨论】：

我希望这是跨平台的

【解决方案6】：

当使用react-native-web 时，您应该使用视口垫片包裹根级树：

    <View
      style={{
        height: Dimensions.get('window').height,
        width: Dimensions.get('window').width,
      }}
    >
      ...
    </View>

这将跨平台规范化抽象单元，并允许所有孩子正确响应测量的 flex（包括来自onLayout 事件的正确测量）

专业提示：您应该将布局尺寸订阅到 Dimensions.addEventListener('change',...) 以捕捉重定向。

【讨论】：

【解决方案7】：

在我的 App 文件的容器上添加这种样式非常适合我：

const styles = StyleSheet.create({
  root: {
    flex:1,
    ...Platform.select({web: {height: '100vh'}}),
  },
});

App.js 看起来像这样：

...
return(<View style={styles.root}>
...

【讨论】：

【解决方案8】：

我正在将 react native web 用于 Web 应用程序。它有左侧永久侧边栏，右侧的内容是可滚动的。

我通过将 ScrollView 容器添加到 Drawer.Screen 中的每个组件来实现这一点。

然后我在 Drawer 中添加了一个 View 容器，并添加了 Dimensions.get("window").height 作为高度。

使用drawer navigation 创建的侧边栏导航。

希望这对某人有所帮助，我花了一些时间来正确设置它。

从实际界面添加截图

import {Dimensions, ScrollView, Text, View} from 'react-native';
import { createDrawerNavigator } from '@react-navigation/drawer';

// Get window height to make screens scrollable
const windowHeight = Dimensions.get('window').height;

function Feed() {
  return (
    <ScrollView>
      <Text>Feed Screen</Text>
    </ScrollView>
  );
}

function Notifications() {
  return (
    <ScrollView>
      <Text>Notifications Screen</Text>
    </ScrollView>
  );
}

const Drawer = createDrawerNavigator();

function MyDrawer() {
  return (
    <Drawer.Navigator initialRouteName="Feed" drawerType="permanent">
      <Drawer.Screen
        name="Feed"
        component={Feed}
        options={{ drawerLabel: 'Home' }}
      />
      <Drawer.Screen
        name="Notifications"
        component={Notifications}
        options={{ drawerLabel: 'Updates' }}
      />
    </Drawer.Navigator>
  );
}
<View style={{height: windowHeight}}>
  <MyDrawer />
</View>

【讨论】：