LoongPanel-Asp/mobile/app/(login)/welcome.tsx

81 lines
2.4 KiB
TypeScript
Raw Normal View History

2024-07-22 18:41:15 +08:00
import {Button, StyleSheet, Text, TouchableOpacity, View} from 'react-native';
import { Asset } from 'expo-asset';
import { Image } from 'expo-image';
import {router} from "expo-router";
export default function Page() {
const wb = require('../../assets/images/welcome_image.png');
return (
<View style={styles.container}>
<Image source={wb} style={styles.Image} />
<View style={styles.textContainer}>
<Text style={styles.textTitle}></Text>
<Text style={styles.text}></Text>
</View>
<TouchableOpacity style={styles.loginButton} onPress={()=>{
router.push("/(login)/login")
}}>
<Text style={styles.loginButtonText}></Text>
</TouchableOpacity>
</View>
)
}
const styles = StyleSheet.create({
container: {
paddingVertical:80,
paddingHorizontal:50,
flex: 1,
alignItems: 'center',
justifyContent: 'center',
display:'flex',
flexDirection:'column',
},
Image:{
flex:1,
flexBasis:6,
width:'100%',
resizeMode:'cover',
maxHeight:'50%'
},
textContainer:{
flex:1,
flexBasis:4,
display:'flex',
flexDirection:'column',
justifyContent:'center',
gap:25,
alignItems:'center',
width:'100%',
},
textTitle:{
color:'#1F41BB',
fontSize:35,
fontWeight:'800',
textAlign:'center'
},
text:{
color:'#000',
textAlign:'center',
fontSize:16,
fontWeight:'500',
},
loginButton: {
backgroundColor: '#1F41BB',
width: '100%',
padding: 15, // 添加一些内边距
borderRadius: 5, // 可选,添加圆角
alignItems: 'center', // 水平居中
marginTop: 50, // 可选,添加一些顶部外边距
shadowOffset: { width: 0, height: 10 }, // 水平偏移和垂直偏移
shadowOpacity: 0.5, // 阴影透明度
shadowRadius: 10, // 阴影半径
elevation: 5, // Android特有的阴影效果iOS使用shadowRadius
shadowColor: '#CBD6FF', // 阴影颜色
},
loginButtonText: {
color: '#FFFFFF',
fontSize: 18,
fontWeight: 'bold',
},
})