【ReactNative】核心组件与 JSX 语法

📱 核心组件与 JSX 语法

🎵大家好，我是老曹。在上一节课中，我们成功搭建了 React Native 的开发环境，并创建了第一个应用。今天我们将深入学习 React Native 的核心组件和 JSX 语法，掌握如何使用 View、Text、Image、ScrollView 和FlatList 等常用组件，以及样式对象的写法。这些是构建用户界面的基础，也是后续开发的核心技能。

---

🌟 引言：为什么核心组件如此重要？

1. 📱 构建用户界面的基石

核心组件是 React Native 提供的跨平台 UI 元素，类似于 HTML 中的标签（如 <div> 和 <span>）。它们帮助开发者快速构建界面，同时保证性能和用户体验。

2. 🎨 样式化与布局的基础

React Native 使用 StyleSheet 和内联样式来定义组件的外观和布局，这与 Web 开发中的 CSS 类似，但更加简洁和高效。

3. 📚 学习目标明确

掌握核心组件和 JSX 语法后，你将能够轻松地组织内容、处理数据展示，并实现基本的交互功能。

---

🎯 学习目标

在本节课结束时，你将掌握以下核心内容：

1. 熟悉 React Native 的核心组件及其用法。
2. 理解 JSX 语法的基本规则和常见用法。
3. 学会使用 StyleSheet 定义样式对象。
4. 掌握列表组件（如 ScrollView 和 FlatList）的使用场景和优化技巧。

---

🔧 核心知识点：React Native 的核心组件

1. 什么是核心组件？

React Native 提供了一系列内置的组件，用于构建跨平台的用户界面。这些组件封装了原生功能，确保在不同平台上都能提供一致的表现。

常见核心组件

组件名	功能描述	对应的 HTML 标签
View	容器组件，用于布局	<div>
Text	显示文本内容	<p> 或 <span>
Image	显示图片	<img>
ScrollView	可滚动的容器	<div> + 滚动条
FlatList	高效渲染长列表的组件	<ul> 或 <ol>

---

💻 实践部分：核心组件的使用

✅1. View 组件：布局容器

View 是 React Native 中最基础的容器组件，类似于 HTML 中的 <div>。它可以包裹其他组件，并通过样式控制布局。

示例代码

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

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.box} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  box: {
    width: 100,
    height: 100,
    backgroundColor: 'blue',
  },
});

代码解读

• View 作为根容器，设置了 flex: 1，使其占据整个屏幕。
• 内部的 box 是一个蓝色的正方形，宽高均为 100。

---

✅2. Text 组件：显示文本

Text 组件用于显示文本内容。它支持嵌套、样式继承和事件绑定。

示例代码

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

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={styles.title}>欢迎来到 React Native！</Text>
      <Text style={styles.subtitle}>这是副标题。</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  title: {
    fontSize: 24,
    fontWeight: 'bold',
    color: '#333',
  },
  subtitle: {
    fontSize: 16,
    color: '#666',
    marginTop: 10,
  },
});

代码解读

• Text 组件通过 style 属性定义字体大小、颜色和间距。
• fontWeight 和 color 分别控制字体粗细和颜色。

---

✅3. Image 组件：显示图片

Image 组件用于显示本地或远程图片。它支持多种图片格式（如 PNG、JPEG 和 GIF）。

示例代码

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

export default function App() {
  return (
    <View style={styles.container}>
      <Image
        source={{ uri: 'https://example.com/image.jpg' }}
        style={styles.image}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
  },
  image: {
    width: 200,
    height: 200,
    borderRadius: 100, // 圆形图片
  },
});

代码解读

• source 属性指定图片的来源，可以是本地路径或远程 URL。
• borderRadius 设置为图片宽度的一半，形成圆形效果。

---

✅4. ScrollView 组件：可滚动容器

ScrollView 是一个可滚动的容器组件，适用于内容超出屏幕高度的场景。

示例代码

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

export default function App() {
  return (
    <ScrollView style={styles.container}>
      {[...Array(20)].map((_, i) => (
        <View key={i} style={styles.item}>
          <Text>Item #{i + 1}</Text>
        </View>
      ))}
    </ScrollView>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  item: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
});

代码解读

• ScrollView 包裹了一个包含 20 个子项的列表。
• 每个子项通过 padding 和 borderBottom 进行分隔。

---

✅5. FlatList 组件：高效渲染列表

FlatList 是 React Native 中用于渲染长列表的高性能组件。它只渲染当前可见的项目，从而提升性能。

示例代码

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

const data = Array.from({ length: 50 }, (_, i) => ({ id: i.toString(), title: `Item #${i + 1}` }));

export default function App() {
  return (
    <FlatList
      data={data}
      keyExtractor={(item) => item.id}
      renderItem={({ item }) => (
        <View style={styles.item}>
          <Text>{item.title}</Text>
        </View>
      )}
    />
  );
}

const styles = StyleSheet.create({
  item: {
    padding: 20,
    borderBottomWidth: 1,
    borderBottomColor: '#ccc',
  },
});

代码解读

• data 是一个包含 50 个项目的数组。
• keyExtractor 提取每个项目的唯一键。
• renderItem 定义了每个项目的渲染方式。

---

📝 样式对象写法

✅1. 使用 StyleSheet 创建样式

React Native 推荐使用 StyleSheet.create 来定义样式对象。这种方式不仅更清晰，还能提高性能。

示例代码

import { StyleSheet } from 'react-native';

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  text: {
    fontSize: 18,
    color: 'red',
  },
});

✅2. 内联样式

除了 StyleSheet，也可以直接在组件中使用内联样式。

示例代码

<View style={{ flex: 1, backgroundColor: 'blue' }} />

---

🧩 总结与展望

✅1. 总结

通过本节课的学习，我们掌握了 React Native 的核心组件和 JSX 语法，包括 View、Text、Image、ScrollView 和 FlatList 的使用方法，以及样式对象的写法。以下是本节课的核心要点：

• 核心组件是构建用户界面的基础。
• FlatList 是渲染长列表的最佳选择。
• 使用 StyleSheet 定义样式更加高效。

✅2. 展望

下一节课我们将学习 Flexbox 布局，深入理解主轴与交叉轴的概念，掌握复杂的界面布局技巧。记得课后多加练习，巩固所学知识！

---

📚 参考资料

1. React Native 官方文档 - 核心组件
2. Flexbox 布局指南

希望这节课能为大家的学习之旅打下坚实的基础！如果有任何疑问，欢迎随时提问。老曹在这里陪你一起成长！ 😊