React Native 环境配置与开发

tbt50223116

于 2025-04-27 17:00:00 发布

阅读量975

点赞数 8

文章标签： react native react.js javascript

本文链接：https://blog.csdn.net/2301_79777620/article/details/147523205

版权

React Native 环境配置与开发：从 SyntaxError 到成功构建

在开发 React Native 应用时，经常会遇到类似这样的错误：

SyntaxError: Unexpected token '<'

这是因为直接使用 node DataEntryScreen.js 运行包含 JSX 的 React 组件，而 Node.js 原生环境无法解析 JSX 语法。本文将结合实战经验，完整解析 React Native 的环境配置、工具链原理，以及如何避开常见陷阱。

**一、环境配置

1. 核心工具安装清单

工具	版本要求	验证命令
Node.js	≥18.x (LTS)	`node -v`
JDK	17.x（必须严格匹配）	`java -version`
Android Studio	最新版	Android Studio 启动界面
Android SDK	API 34 (Android 14)	SDK Manager 查看

关键操作：

配置 JAVA_HOME 和 ANDROID_HOME 环境变量：

# Windows 示例  
JAVA_HOME = C:\Program Files\Java\jdk-17  
ANDROID_HOME = C:\Users\YourName\AppData\Local\Android\Sdk

将 Android 工具链加入 PATH：

%ANDROID_HOME%\platform-tools  
%ANDROID_HOME%\emulator  
%ANDROID_HOME%\tools

2. 项目初始化：正确生成 RN 骨架

npx react-native init YourProjectName

注意事项：

若网络超时，可在 android/build.gradle 中添加国内镜像：

repositories {  
    maven { url 'https://maven.aliyun.com/repository/google' }  
    maven { url 'https://maven.aliyun.com/repository/public' }  
}

二、解决常见错误

1. “adb 不是内部命令”

原因：未正确配置 Android 的 platform-tools 路径。
解决：

检查 Android Studio 是否安装了 Android SDK Platform-Tools。
确保 PATH 中包含 %ANDROID_HOME%\platform-tools。

2. Gradle 构建卡死

原因：国内网络无法下载 Gradle 包。
解决：

手动下载 Gradle 8.13 并放置到缓存目录：

~/.gradle/wrapper/dists/gradle-8.13-bin/随机哈希/gradle-8.13-bin.zip

3. 模拟器无法启动

解决：

使用 AVD Manager 创建虚拟设备（推荐 Pixel 6 Pro + API 34）。

命令行启动模拟器：

emulator -avd Pixel_6_Pro -dns-server 8.8.8.8

4. Metro 服务器无法连接

现象：App 启动后显示 “Could not connect to development server”。
解决：

确保已运行 npx react-native start。
在设备上摇动调出菜单 → 点击 Dev Settings → 输入电脑的 IP 地址。

三、：React Native 如何真正工作

1. Metro 的核心作用

JSX 编译：将 <View> 转换为 React.createElement(View)。
实时打包：监听文件变化，0.5 秒内更新代码。
资源处理：自动处理图片、字体等资源的 require 路径。

2. 正确启动流程

# 终端1：启动 Metro（必须保持运行）  
npx react-native start  

# 终端2：安装并启动 Android 应用  
npx react-native run-android  

# 终端3：启动 iOS 应用（需 macOS 环境）  
npx react-native run-ios

3. 为什么不能直接运行 .js 文件？

JSX 不可执行：浏览器和 Node.js 均无法直接解析 JSX 语法。
依赖加载：import 语句需要 Metro 解析 node_modules 依赖树。

**四、代码实现

1. 创建数据录入页面 (DataEntryScreen.js)

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

const DataEntryScreen = () => {  
  const [text, setText] = React.useState('');  

  return (  
    <View style={{ padding: 20 }}>  
      <TextInput  
        placeholder="请输入内容"  
        value={text}  
        onChangeText={setText}  
      />  
      <Button title="提交" onPress={() => console.log(text)} />  
    </View>  
  );  
};  

export default DataEntryScreen;

2. 导航配置 (App.js)

import { NavigationContainer } from '@react-navigation/native';  
import { createStackNavigator } from '@react-navigation/stack';  
import DataEntryScreen from './src/screens/DataEntryScreen';  

const Stack = createStackNavigator();  

export default function App() {  
  return (  
    <NavigationContainer>  
      <Stack.Navigator>  
        <Stack.Screen name="DataEntry" component={DataEntryScreen} />  
      </Stack.Navigator>  
    </NavigationContainer>  
  );  
}