# Day_4：第一个 React Native 页面——组件、JSX 与 StyleSheet

> 今天不写复杂逻辑，只做出一个像样的页面。

预计用时：40～60 分钟。

## 今日目标

- 理解组件与 JSX
- 使用 `View`、`Text`、`Image`
- 使用 `StyleSheet` 编写样式
- 完成 CampusHelper 的个人信息卡片

## 1. React Native 页面是什么

React Native 用组件描述页面：

```text
View = 布局容器
Text = 文字
Image = 图片
StyleSheet = 样式规则
```

与 Web 不同，不能直接写 `div`、`p`；文字必须放在 `Text` 中。

## 2. 一个最小页面

在入口屏幕中尝试下面的代码：

```tsx
import { StyleSheet, Text, View } from 'react-native';

export default function HomeScreen() {
  return (
    <View style={styles.page}>
      <Text style={styles.title}>Hello APP</Text>
      <Text>这是我的第一个 React Native 页面。</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  page: { flex: 1, padding: 24, backgroundColor: '#F5F7FB' },
  title: { fontSize: 28, fontWeight: '700', marginBottom: 12 },
});
```

`style={styles.title}` 表示把 `styles` 中名为 `title` 的样式应用到文字。

## 3. 制作个人信息卡片

在页面中加入以下结构，并替换成你自己的信息：

```tsx
<View style={styles.card}>
  <Text style={styles.name}>小明</Text>
  <Text style={styles.meta}>计算机科学与技术</Text>
  <Text style={styles.meta}>方向：移动端开发</Text>
</View>
```

为 `card` 添加 `padding`、`backgroundColor`、`borderRadius` 和 `marginTop`；为 `name` 设置更大的 `fontSize` 和 `fontWeight: '700'`。

## 今日任务

完成一张个人信息卡片，至少展示：姓名、专业、感兴趣的方向、想学习的技术。自行调整背景、间距、字号或圆角，使页面有自己的风格。

## 验收标准

- [ ] 使用了 `View` 和 `Text`
- [ ] 使用 `StyleSheet.create`
- [ ] 页面显示四项个人信息
- [ ] 卡片具有间距、背景色和圆角
- [ ] 在 Expo Go 或模拟器中正常预览