从零开始使用React Native + Expo + Native Base搭建App在这篇文章中，我将使用 Reac

在这篇文章中，我将使用 React Native、Expo 和 Native Base 来构建一个简单的移动应用程序。

准备工作

在开始之前，确保你的计算机上安装了以下工具：

Node.js（建议版本 14.x 及以上）
npm 或 yarn（Node.js 自带 npm，yarn 可单独安装）
一个代码编辑器（如 VSCode）
Expo Go 应用（可在你的手机上从 App Store 或 Google Play 下载）

安装 Expo CLI

首先，我们需要安装 Expo CLI，它是用于管理 Expo 项目的命令行工具。打开终端并执行以下命令：

npm install -g expo-cli

或者如果你使用 yarn：

yarn global add expo-cli

创建一个新的 Expo 项目

安装完 Expo CLI 后，我们可以创建一个新的 Expo 项目。运行以下命令：

expo init MyAwesomeApp

在创建过程中，你会看到一些选项。选择一个空白模板（blank），然后进入项目目录：

cd MyAwesomeApp

安装 Native Base

Native Base 是一个流行的 UI 组件库，能够帮助我们更快地构建美观的应用界面。运行以下命令来安装 Native Base 及其依赖：

npm install native-base

或者使用 yarn：

yarn add native-base

同时，我们还需要安装 react-native-gesture-handler 和 react-native-reanimated：

npm install react-native-gesture-handler react-native-reanimated

在安装完成后，确保在 App.js 文件中引入 Native Base Provider：

import 'react-native-gesture-handler';
import { NativeBaseProvider } from 'native-base';

构建简单的应用界面

接下来，我们开始构建应用的界面。在 App.js 文件中，更新代码如下：

import React from 'react';
import { NativeBaseProvider, Box, Text, Button } from 'native-base';

const App = () => {
  return (
    <NativeBaseProvider>
      <Box flex={1} justifyContent="center" alignItems="center" bg="primary.500">
        <Text color="white" fontSize="24" mb={4}>
          欢迎使用 React Native + Expo + Native Base!
        </Text>
        <Button onPress={() => alert('按钮被点击!')}>
          点击我
        </Button>
      </Box>
    </NativeBaseProvider>
  );
};

export default App;

在上面的代码中，我们创建了一个简单的界面，包含一段欢迎文本和一个按钮。当按钮被点击时，会弹出一个提示框。

运行应用

至此，我们的应用已构建完成。现在，返回终端，运行以下命令启动 Expo 服务器：

expo start

扫描终端中显示的二维码，使用手机上的 Expo Go 应用进行扫描，即可在手机上运行你的应用。

总结

如有任何问题，欢迎在评论区留言交流。