开始使用 React Native?请先阅读本文!

react nativejavascriptmobile development

React Native 是一个允许开发人员使用 JavaScript 和 React 构建移动应用程序的框架。它允许开发人员在 iOS 和 Android 平台上使用相同的代码库，使其成为一种经济高效的移动开发解决方案。

React Facebook 于 2015 年首次将 Native 作为开源项目推出。它基于 React，一个用于构建用户界面的 JavaScript 库，允许开发人员构建外观和感觉像原生应用的移动应用。

使用这些工具和资源构建 React Native 应用

使用 Expo CLI 或 React Native CLI 安装和设置 React Native 项目的主要方法有两种。

Expo 是一个围绕 React Native 构建的工具链，允许开发人员轻松设置和运行 React Native 项目，而无需 Xcode 或 Android Studio。

用户可以按照以下步骤开始使用 React Native。

使用 React Native CLI 安装和设置

React Native CLI 是用于构建 React Native 项目的命令行界面。它允许开发人员创建和管理 React Native 项目，以及为 iOS 和 Android 平台构建、运行和测试应用程序。

步骤 1 - 用户需要 Node、React Native 命令行界面、JDK 和 Android Studio。

步骤 2 - 安装 Android Studio 和 SDK 并配置 ANDROID_HOME 环境变量。

步骤 3 - 如果系统中先前安装了全局 react-native-CLI 包，我们需要将其删除，因为它可能会导致意外问题。

npm uninstall -g react-native-cli @react-native-community/cli

步骤 4 - 创建一个新的 React Native 项目

npx react-native init <projectName>

步骤 5 - 导航到项目目录

cd <projectName>

步骤 6 - 如果用户有物理 Android 设备，他们可以使用 USB 电缆将其插入计算机，代替 AVD 进行开发

步骤 7 - 现在，用户可以输入以下命令来运行项目。

npx react-native start

使用 Expo Go 安装和设置

步骤 1 - 首先，用户必须在本地计算机上下载并安装 Node Js 和 npm(Node 包管理器)。

步骤 2 - 接下来，用户必须安装 Expo CLI。可以通过在终端中运行以下命令来完成此操作 -

npm install -g expo-cli

步骤 3 - 安装 CLI 后，用户可以通过运行以下命令创建一个新的 React Native 项目 -

npx create-expo-app <projectName>

步骤 4 - 导航到项目目录

cd <project-name>

步骤 5 − 现在，用户可以运行以下命令来启动开发服务器。

npm start

步骤 6 − 现在，用户需要在他们的 iOS 或 Android 手机上安装 Expo Go 应用程序，并连接到与他们的计算机相同的无线网络。在 Android 上，使用 Expo Go 应用从终端扫描二维码打开项目。

在 React Native 中创建一个简单的"Hello World"项目

有了上述工具和资源，我们就可以开始构建我们的第一个 React Native 应用了。

通过运行以下命令创建一个新项目 (HelloWorld) −

npx create-expo-app HelloWorld
cd HelloWorld

npm start

在编辑器或 IDE 中打开"App.js"文件，并将现有代码替换为以下内容 −

import React from 'react';
import { Text, View } from 'react-native';
const App = () => {
   return (
      <View>
         <Text>Hello World!</Text>
      </View>
   );
};
export default App;

开发服务器启动成功，用户从终端扫描二维码时，可以看到下面的输出。

Hello World!

用于构建移动应用的 React Native 函数和概念

使用 React Native 构建高效且用户友好的移动应用所需的核心概念和函数。

组件

React Native 使用基于组件的架构，其中组件是应用的构建块，这些组件可以重复使用和嵌套以创建复杂的 UI。

道具和状态

React Native 使用道具和状态来管理应用的数据和状态。 Props 用于将数据从父组件传递到子组件，而 state 用于管理组件的内部状态。

Hooks

React Native hooks 允许用户在功能组件中使用状态和其他 React 功能。最常用的钩子是 useState、useEffect、useContext、useRef 等。

Flexbox

React Native 使用 Flexbox，这是一种允许用户灵活定位和调整元素大小的布局系统。

StyleSheet

React Native 提供了一个 StyleSheet API，允许用户定义组件的样式。

调试

React Native 提供了一个强大的调试工具，称为 React Native 开发者工具，允许用户检查组件树，查看组件的 props 和状态，并实时更改代码。

示例 - Todo 应用

在下面的示例中，我们将在 React Native 中创建一个待办事项列表，用户需要先设置一个基本项目。

这个简单、实用的组件允许用户从列表中添加和删除待办事项。它使用 useState 钩子来管理待办事项输入字段和待办事项列表的状态。

列表上每个待办事项旁边的按钮允许用户将其删除。

import React, { useState } from 'react';
import { View, Text, TextInput, Button } from 'react-native';
const TodoList = () => {
   const [todo, setTodo] = useState('');
   const [todos, setTodos] = useState([]);

   const addTodo = () => {
      setTodos([...todos, todo]);
      setTodo('');
   }

   const removeTodo = (index) => {
      const newTodos = [...todos];
      newTodos.splice(index, 1);
      setTodos(newTodos);
   }

   return (
      <View>
         <TextInput
            placeholder="Enter a todo"
            value={todo}
            onChangeText={text => setTodo(text)}
         />
         <Button 
            title="Add Todo"
            onPress={addTodo}
         />
         {
            todos.map((item, index) => (
               <View key={index}>
                  <Text>{item}</Text>
                  <Button
                     title="Remove"
                     onPress={() => removeTodo(index)}
                  />
               </View>
            ))
         }
      </View>
   );
}
export default TodoList;