React Native 入门指南：React 核心概念详解

React Native 基础

React Native 的开发基于 React，这是一个在 Web 端广泛使用的开源 UI 框架。要掌握 React Native，首先了解 React 本身的基本概念至关重要。本文将介绍 React 的核心知识，帮助初学者快速入门。

主要涵盖以下几个关键概念：

• 组件（Components）
• JSX 语法
• 属性（Props）
• 状态（State）

如需深入学习，建议查阅 React 官方文档，其中提供了中文版本。

编写一个组件

我们将以“Cat”为例，演示如何创建一个简单的组件。组件可以通过函数式或类组件两种方式定义。首先，需要导入 React 和 React Native 的 Text 组件：

import React from 'react';
import { Text } from 'react-native';

然后，定义一个函数作为组件，其返回值会被渲染为 React 元素。例如，一个 Cat 组件可以渲染一个 Text 元素：

const Cat = () => {
  return <Text>Hello, I am your cat!</Text>;
};

export default Cat;

这里使用 export default 导出组件，以便在其他地方引用。组件的返回语句中，<Text>Hello, I am your cat!</Text> 是一种称为 JSX 的语法。

JSX 语法

React 和 React Native 都使用 JSX，允许在 JavaScript 中直接编写元素。例如，<Text>Hello, I am your cat!</Text> 就是一个 JSX 表达式。由于 JSX 本质是 JavaScript，你可以在其中嵌入变量或表达式。例如，声明一个名字变量并放入 Text 中：

const name = 'Whiskers';
return <Text>Hello, I am {name}!</Text>;

花括号 {} 内可以放置任何 JavaScript 表达式，包括函数调用。需要注意的是，JSX 最终会被编译为 React.createElement 调用，因此必须在文件顶部导入 React。

自定义组件

React Native 提供了核心组件，如 View、Text 和 TextInput。通过嵌套这些组件，可以构建更复杂的自定义组件。例如，将 Text 和 TextInput 嵌入到 View 中：

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

const Cafe = () => {
  return (
    <View>
      <Text>Welcome to the Cafe!</Text>
      <TextInput placeholder="Enter your order" />
    </View>
  );
};

对于有 Web 开发背景的开发者，View 类似于 HTML 中的 div，Text 类似于 p 标签。自定义组件可以在其他组件中复用，形成父子关系。例如，一个 Cafe 父组件可以包含多个 Cat 子组件，每个 Cat 可以通过不同的属性进行定制。

Props 属性

Props 是组件的属性，用于定制组件的行为和外观。例如，给 Cat 组件传递一个 name 属性：

const Cat = (props) => {
  return <Text>Hello, I am {props.name}!</Text>;
};

const Cafe = () => {
  return (
    <>
      <Cat name="Munkustrap" />
      <Cat name="Spot" />
    </>
  );
};

核心组件通常提供多种 props。例如，Image 组件有 source 属性来指定图片源，style 属性来定义样式。在 JSX 中传递对象值时，需要使用双层花括号，例如 style={{width: 200, height: 200}}。

State 状态

State 用于管理组件内部随时间或交互变化的数据。与 props 不同，state 是组件私有的。React 提供了 useState Hook 来在函数组件中添加状态。

首先，从 react 导入 useState：

import React, { useState } from 'react';

然后，在组件内调用 useState 声明状态变量。例如，创建一个 isHungry 状态：

const Cat = (props) => {
  const [isHungry, setIsHungry] = useState(true);

  return (
    <>
      <Text>Hello, I am {props.name}, and I am {isHungry ? 'hungry' : 'full'}.</Text>
      <Button
        onPress={() => setIsHungry(false)}
        disabled={!isHungry}
        title={isHungry ? 'Pour me some milk, please!' : 'Thank you!'}
      />
    </>
  );
};

useState 返回一个数组，包含当前状态值和一个设置状态的函数。当状态更新时，组件会重新渲染，反映新的值。

在父组件中，可以组合多个 Cat 组件，并使用 Fragment（<> 和 </>）避免不必要的容器视图。

掌握这些核心概念后，你可以进一步学习如何处理文本输入、使用更多核心组件，以及构建更复杂的 React Native 应用。