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

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

预计用时：40～60 分钟。

今日目标

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

1. React Native 页面是什么

React Native 用组件描述页面：

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

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

2. 一个最小页面

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

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. 制作个人信息卡片

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

<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 或模拟器中正常预览

2.0 KiB Raw Blame History Unescape Escape