arthur
76 lines
2.0 KiB
Markdown
76 lines
2.0 KiB
Markdown
# 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 或模拟器中正常预览
|