我正在使用React Native
创建一个基本的登录界面,包括一个标志和两个输入框:
//import liraries
import React, { Component } from 'react';
import { View, Text, StyleSheet, Image } from 'react-native';
// create a component
class Login extends Component {
render() {
const imageURL = require('./images/CircleLogo.png');
return (
<View style={styles.container}>
<View style={styles.loginContainer}>
<Image resizeMode="contain" style={styles.logo} source={imageURL} />
</View>
<View style={styles.formContainer}>
<LoginForm />
</View>
</View>
);
}
}
// define your styles
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: 'aliceblue',
},
loginContainer:{
alignItems: 'center',
flexGrow: 1,
justifyContent: 'center'
},
logo: {
position: 'absolute',
width: '70vw',
height: '70vw',
maxWidth: 300
}
});
//make this component available to the app
export default Login;
正如您所看到的,我正在使用 vw
和 vh
的 css 计量单位。
这在网页上可以工作,但在 iOS 或 Android 上不行。
有人有好的建议来处理 vw
和 vh
吗?
顺便说一句:React 可以接受百分比,如此处所示,我可能会退回到这种方法。但我的问题特别涉及 vw
和 vh
的计量单位。
useWindowDimensions
API。它会自动传播更新并且从0.12.0版本开始能够与React Native Web无缝协同工作。 - tjeisenschenkreact-native-viewport-units
包在 Next JS(服务器端渲染)的导入级别上出现问题,导致无谓的延迟加载复杂化。 - KeitelDOG