核心组件与样式

这一课你将能做到

1. 用 View、Text、Image、TextInput、ScrollView、Pressable 搭建任意静态界面
2. 写出能响应按压状态的可点击组件，并说明 Pressable 和 Button 的本质区别
3. 用 StyleSheet.create 管理样式，理解 flex: 1 在 RN 布局中的核心含义

为什么要学

RN 里没有 HTML 标签，所有界面都靠十几个核心组件像乐高一样拼出来。这几个组件就像积木的基础块——块不多，但组合无限。掌握它们，你就掌握了 RN 界面的 80%。

人话：View 是万能容器（相当于 div），Text 是文字容器（所有文字必须用它包），Image 是图片，TextInput 是输入框，ScrollView 是滚动容器。Pressable 是「可按压的任何东西」——RN 里真正的按钮全部是自己用 Pressable 包出来的，Button 组件仅用于极快速的原型验证。

先建立图像

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.card}>
        <Image source={{ uri: 'https://picsum.photos/100' }} style={styles.avatar} />
        <View style={styles.info}>
          <Text style={styles.name}>张小明</Text>
          <Text style={styles.bio}>前端工程师 · 北京</Text>
        </View>
      </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: { flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: '#f5f5f5' },
  card: { flexDirection: 'row', alignItems: 'center', backgroundColor: '#fff', padding: 16, borderRadius: 12, width: '90%' },
  avatar: { width: 56, height: 56, borderRadius: 28 },
  info: { marginLeft: 12 },
  name: { fontSize: 18, fontWeight: 'bold' },
  bio: { fontSize: 14, color: '#888', marginTop: 4 },
});

渲染结果：灰白屏幕中央一张白色卡片，左边圆形头像，右边姓名和简介。整个页面一个 div 没有，全是 RN 原生组件。

跟着做

步骤 1：View 与 Text 的分工与嵌套

View 只能装东西，不能直接显示文字；文字必须放 Text 里。这是 RN 的铁律，和 Web 最大的区别之一。

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

export default function App() {
  return (
    <View style={{ padding: 24 }}>
      {/* 错误示范：文字直接写在 View 里会红屏 */}
      {/* <View>你好</View> */}

      {/* 正确 */}
      <Text style={{ fontSize: 20, fontWeight: 'bold' }}>标题</Text>
      <Text style={{ fontSize: 14, color: '#666', marginTop: 8 }}>
        普通文字。总价：<Text style={{ color: 'red', fontWeight: 'bold' }}>¥99</Text>
      </Text>
    </View>
  );
}

Text 可以嵌套 Text，子 Text 继承父 Text 的样式，但可以被覆盖——这是 RN 里唯一有样式继承关系的地方。View 嵌 View 则不存在继承。

步骤 2：Image 显示网络图和本地图

import { Image, View } from 'react-native';

export default function App() {
  return (
    <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
      {/* 网络图片：必须显式给宽高，否则不显示 */}
      <Image
        source={{ uri: 'https://picsum.photos/200' }}
        style={{ width: 120, height: 120, borderRadius: 60 }}
        resizeMode="cover"
      />

      {/* 本地图片：require 静态引入，不需要写宽高（能自动读取尺寸） */}
      <Image
        source={require('./assets/icon.png')}
        style={{ width: 48, height: 48, marginTop: 16 }}
      />
    </View>
  );
}