第 1 课：View、Text 与基础界面

日期：2026-08-31
课程序号：第 1 课
知识点：View、Text 与 StyleSheet

用途

React Native 使用原生基础组件组合移动界面，而不是直接使用网页的 div 和 p 标签。

核心概念

View 是常用布局容器。
文本必须放在 Text 组件中。
StyleSheet.create() 集中定义样式。
组件仍使用 React 的函数与 JSX 组合方式。

最小代码示例

tsx

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>React Native 第 1 课</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, alignItems: 'center', justifyContent: 'center' },
  title: { fontSize: 24, fontWeight: '600' },
});

3～5 分钟练习

在标题下增加一个 Text，内容为“开始构建移动应用”，字号设为 16。

参考答案

tsx

<Text style={{ fontSize: 16 }}>开始构建移动应用</Text>

与上一课的联系

这是 React Native 路线的第一课。下一课将学习 Flexbox 的纵向与横向布局。