App.tsx

// 1. 导入我们需要的“积木”
import React from 'react';
import { StyleSheet, View, Text, SafeAreaView } from 'react-native';

// 2. 这是我们的App主组件
const App = () => {
  return (
    // SafeAreaView 是一个特殊的View，能自动避开刘海和底部横条
    <SafeAreaView style={styles.container}>
      <View style={styles.spacer} /> 
      <View style={styles.card}>
        <Text style={styles.title}>Rebecca</Text>
        <Text style={styles.subtitle}>2023级数字媒体技术专业</Text>
        <Text style={[styles.text,{marginTop:10}]}>电话：13709040302</Text>
        {/* 右边的样式覆盖左边的样式！太神奇了 */}
        <Text style={styles.text}>职业：设计师 & 开发者</Text>
        <Text style={styles.text}>兴趣：唱歌</Text>
        <Text style={styles.text}>QQ：1525640145</Text>
      </View>
      <View style={styles.spacer} /> 
    </SafeAreaView>
  );
};

// 3. 这是我们的“样式面板”
const styles = StyleSheet.create({
  container: {
    // padding: 40,
    flex: 1, // 让容器占满整个屏幕
    flexDirection: 'row', // <-- 关键！让子元素水平排列
    // justifyContent: 'center', // 垂直居中
    alignItems: 'center', // 居中对齐
    // backgroundColor: '#FDF3DC', // 给一个浅灰色背景
    backgroundColor: 'red',
    
  },
  card:{
    borderRadius:16,
    flex:1,
    // width:300,
    // height:180, //注释掉高度就是自适应的
    padding:20,
    backgroundColor: '#ffffffff',
    shadowColor:'#000000ff',
    shadowOffset:{width:0,height:2},
    shadowOpacity:0.1, //不透明度，模糊度
    shadowRadius:4, //阴影范围
  },
  spacer:{
    width:20,
  },
  title: {
    fontSize: 24, // 字号
    fontWeight: 'bold', // 字重
    color: '#333', // 颜色
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    marginTop: 6, // 和标题的上边距
  },
  text:{
    fontSize:12,
    fontWeight:'thin',
    color:'#666',
    marginTop:6,
  },

});

// 4. 导出App组件，让程序能找到它
export default App;