关于React-Native设计.使用view在other之上

Question

项目图片

我想知道你是否有办法使这个屏幕更好。这对手机或平板电脑都有响应。下面的图像，它应该看起来。我应该对所有的项目都使用绝对吗?有什么办法让这个更敏感??

项目形象

import React from 'react';
import {
Image,
StyleSheet,
Text,
View,
TextInput,
TouchableOpacity,
} from 'react-native';
import {} from 'react-native-gesture-handler';
const Login = () => {
return (
<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'black'}} />
<View
style={{
flex: 1,
backgroundColor: 'white',
position: 'absolute',
top: '40%',
bottom: 0,
left: 0,
right: 0,
borderTopLeftRadius: 50,
borderTopRightRadius: 50,
}}>
<View
style={{
position: 'relative',
top: '10%',
marginHorizontal: 30,
marginVertical: 20,
}}>
<Text>Email</Text>
<TextInput
placeholder="Email"
style={{borderColor: 'gray', borderBottomWidth: 2}}
/>
</View>
<View
style={{
position: 'relative',
top: '10%',
marginHorizontal: 30,
marginVertical: 20,
}}>
<Text>Password</Text>
<TextInput
placeholder="Password"
style={{borderColor: 'gray', borderBottomWidth: 2}}
/>
</View>
<View
style={{
position: 'relative',
top: '10%',
alignSelf: 'center',
width: 150,
height: 50,
backgroundColor: 'Black',
alignItems: 'center',
justifyContent: 'center',
borderRadius: 40,
}}>
<TouchableOpacity>
<Text style={{color: 'white'}}>Login</Text>
</TouchableOpacity>
</View>
</View>
</View>
);
};
export default Login;

谁能告诉我一个更好的方法，使这个更响应移动和平板电脑?对于图2中显示圆的部分。有更好的方法吗?或者我必须使用绝对位置的一切??提前感谢大家

Answer 1

可以,使用justifyContent: 'flex-end'View父母风格看起来像:

<View
style={{
flex: 1,
backgroundColor: 'black',
justifyContent: 'flex-end',
}}
>
{...view input email password here...}<View/>