如何使本机Web充分发挥作用？

Question

我正在使用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浏览器的结果：

Answer 1

React Native 不理解视口单位。我们可以使用Platformreact-native提供的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%'}})
   }
})

Answer 2

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

position:'absolute' 或者 position:'fixed'

亲戚不工作 position:'relative'