无法使 React Native 登录屏幕类似于图像布局
Unable to make React Native login screen similar to image layout
我是 React Native 的新手,我一直在尝试布局我的登录屏幕,但很难做到正确。这是我要实现的粗略布局:
我有以下代码,顶部蓝色背景占据屏幕的 2/3,灰色占据剩余的 1/3。登录文本输入位于一个白色框中,其位置恰好是一半在蓝色背景中,一半在灰色背景中。
我有以下代码:
<View style={styles.container}>
<Text>Logo</Text>
<View style={styles.loginBox}>
<Text>text input</Text>
</View>
<TouchableOpacity style={styles.button} activeOpacity={.85}>
<Text style={styles.btnText}>LOGIN</Text>
</TouchableOpacity>
</View>
const styles = StyleSheet.create({
container: {
backgroundColor: '#439c8f',
flex: 0.66,
flexDirection: 'column',
justifyContent: 'flex-end'
},
loginBox: {
backgroundColor: '#ffffff',
flex: 0.60,
flexDirection: 'column',
marginLeft: 10,
marginRight: 10,
justifyContent: 'flex-end',
},
button: {
alignItems: 'center',
backgroundColor: '#6d5cae',
padding: 10,
margin: 40,
borderRadius: 5,
},
btnText: {
color: 'white',
fontWeight: 'bold'
}
});
这种方法有点不同,
将文本输入(电子邮件和密码)分成不同的部分,并在顶部视图的 flex-end 插入电子邮件,在底部视图中插入密码。
<View style={styles.container}>
<View style={styles.topView}>
<View style={styles.loginBox}>
<Text>EMAIL</Text>
<TextInput
style={styles.textInput}
placeholder="test@test.com"
placeholderTextColor="black"
/>
</View>
</View>
<View style={styles.bottomView}>
<View style={styles.loginBox}>
<Text>PASSWORD</Text>
<TextInput
style={styles.textInput}
placeholder="........."
placeholderTextColor="black"
secureTextEntry="true"
/>
</View>
<TouchableOpacity style={styles.button}>
<Text style={styles.btnText}>LOGIN</Text>
</TouchableOpacity>
</View>
</View>
const styles = StyleSheet.create({
container: {
flex: 1
},
topView: {
flex: 2/3,
backgroundColor: "#80a0ed",
justifyContent: "flex-end"
},
bottomView: {
flex: 1/3,
backgroundColor: "#d1deff"
},
button: {
alignItems: "center",
backgroundColor: "#ef89ff",
padding: 10,
marginTop: 15,
marginLeft: 40,
marginRight: 40,
borderRadius: 5
},
btnText: {
color: "white",
fontWeight: "bold",
fontSize: 16
},
textInput: {
marginTop: 10,
backgroundColor: "#c2c6d1",
padding: 10
},
loginBox: {
backgroundColor: "#ffffff",
flexDirection: "column",
paddingTop: 10,
paddingBottom: 10,
paddingLeft: 20,
paddingRight: 20,
marginLeft: 20,
marginRight: 20
}
});
否则,您必须为样式(loginBox)提供位置值。
例如:-
position: 'absolute',
marginTop: "your value",
marginLeft: "your value"
我是 React Native 的新手,我一直在尝试布局我的登录屏幕,但很难做到正确。这是我要实现的粗略布局:
我有以下代码,顶部蓝色背景占据屏幕的 2/3,灰色占据剩余的 1/3。登录文本输入位于一个白色框中,其位置恰好是一半在蓝色背景中,一半在灰色背景中。
我有以下代码:
<View style={styles.container}>
<Text>Logo</Text>
<View style={styles.loginBox}>
<Text>text input</Text>
</View>
<TouchableOpacity style={styles.button} activeOpacity={.85}>
<Text style={styles.btnText}>LOGIN</Text>
</TouchableOpacity>
</View>
const styles = StyleSheet.create({
container: {
backgroundColor: '#439c8f',
flex: 0.66,
flexDirection: 'column',
justifyContent: 'flex-end'
},
loginBox: {
backgroundColor: '#ffffff',
flex: 0.60,
flexDirection: 'column',
marginLeft: 10,
marginRight: 10,
justifyContent: 'flex-end',
},
button: {
alignItems: 'center',
backgroundColor: '#6d5cae',
padding: 10,
margin: 40,
borderRadius: 5,
},
btnText: {
color: 'white',
fontWeight: 'bold'
}
});
这种方法有点不同,
将文本输入(电子邮件和密码)分成不同的部分,并在顶部视图的 flex-end 插入电子邮件,在底部视图中插入密码。
<View style={styles.container}>
<View style={styles.topView}>
<View style={styles.loginBox}>
<Text>EMAIL</Text>
<TextInput
style={styles.textInput}
placeholder="test@test.com"
placeholderTextColor="black"
/>
</View>
</View>
<View style={styles.bottomView}>
<View style={styles.loginBox}>
<Text>PASSWORD</Text>
<TextInput
style={styles.textInput}
placeholder="........."
placeholderTextColor="black"
secureTextEntry="true"
/>
</View>
<TouchableOpacity style={styles.button}>
<Text style={styles.btnText}>LOGIN</Text>
</TouchableOpacity>
</View>
</View>
const styles = StyleSheet.create({
container: {
flex: 1
},
topView: {
flex: 2/3,
backgroundColor: "#80a0ed",
justifyContent: "flex-end"
},
bottomView: {
flex: 1/3,
backgroundColor: "#d1deff"
},
button: {
alignItems: "center",
backgroundColor: "#ef89ff",
padding: 10,
marginTop: 15,
marginLeft: 40,
marginRight: 40,
borderRadius: 5
},
btnText: {
color: "white",
fontWeight: "bold",
fontSize: 16
},
textInput: {
marginTop: 10,
backgroundColor: "#c2c6d1",
padding: 10
},
loginBox: {
backgroundColor: "#ffffff",
flexDirection: "column",
paddingTop: 10,
paddingBottom: 10,
paddingLeft: 20,
paddingRight: 20,
marginLeft: 20,
marginRight: 20
}
});
否则,您必须为样式(loginBox)提供位置值。
例如:-
position: 'absolute',
marginTop: "your value",
marginLeft: "your value"