Windows10下React Native构建失败：Android SDK版本N/A求助

环境信息 #

• Windows 10 系统
• Git 2.42.0
• Node.js 20.7.0
• NPM 10.1.0
• React Native CLI 0.72.4
• Android Studio Giraffe 2022.2.1
• Android SDK 33 (Tiramisu 带Google Play)
• 项目通过 npx react-native init MyApp --version 0.72 创建，当前React Native版本0.72.5

问题现象 #

• 初始示例代码可正常运行，替换为自定义星级评分弹窗代码后，Android Studio启动模拟器时构建失败
• 执行 npx react-native doctor 检测，Android SDK版本显示为 N/A
• 执行 npx react-native run-android 报错

已尝试操作 #

• 重新安装Android SDK 13.0 (Tiramisu)并重启电脑，问题未解决
• 配置系统环境变量：
  • 添加 ANDROID_HOME 指向 C:\Users\MyComputerName\AppData\Local\Android\Sdk
  • 将 C:\Users\MyComputerName\AppData\Local\Android\Sdk\platform-tools 和 C:\Users\MyComputerName\AppData\Local\Android\Sdk\cmdline-tools 加入系统PATH
• 已在 android/app/build.gradle 中添加 apply from: file("../../node_modules/react-native-vector-icons/fonts.gradle") 以支持 react-native-vector-icons

项目配置 #

package.json #

{
  "name": "AyasanApp",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "android": "react-native run-android",
    "ios": "react-native run-ios",
    "lint": "eslint .",
    "start": "react-native start",
    "test": "jest"
  },
  "dependencies": {
    "@expo/vector-icons": "^13.0.0",
    "expo-font": "^11.6.0",
    "react": "18.2.0",
    "react-native": "0.72.5"
  },
  "devDependencies": {
    "@babel/core": "^7.20.0",
    "@babel/preset-env": "^7.20.0",
    "@babel/runtime": "^7.20.0",
    "@react-native/eslint-config": "^0.72.2",
    "@react-native/metro-config": "^0.72.11",
    "@tsconfig/react-native": "^3.0.0",
    "@types/react": "^18.0.24",
    "@types/react-native-vector-icons": "^6.4.14",
    "@types/react-test-renderer": "^18.0.0",
    "babel-jest": "^29.2.1",
    "eslint": "^8.19.0",
    "jest": "^29.2.1",
    "metro-react-native-babel-preset": "0.76.8",
    "prettier": "^2.4.1",
    "react-native-vector-icons": "^10.0.0",
    "react-test-renderer": "18.2.0",
    "typescript": "4.8.4"
  },
  "engines": {
    "node": ">=16"
  }
}

App.tsx #

import React, {useState} from 'react';
import {
  Alert,
  StyleSheet,
  Text,
  View,
  SafeAreaView,
  TouchableWithoutFeedback,
  Animated,
  Modal,
  Pressable,
} from 'react-native';
import AntDesign from 'react-native-vector-icons/AntDesign';

function App(): JSX.Element {
  const [modalVisible, setModalVisible] = useState(false);
  const starRatingOptions = [1, 2, 3, 4, 5];
  const [starRating, setStarRating] = useState(0);
  const animatedButtonScale = new Animated.Value(1);

  const handlePressIn = () => {
    Animated.spring(animatedButtonScale, {
      toValue: 1.5,
      useNativeDriver: true,
      speed: 50,
      bounciness: 4,
    }).start();
  };

  const handlePressOut = () => {
    Animated.spring(animatedButtonScale, {
      toValue: 1,
      useNativeDriver: true,
      speed: 50,
      bounciness: 4,
    }).start();
  };

  const animatedScaleStyle = {
    transform: [{scale: animatedButtonScale}],
  };

  return (
    <SafeAreaView style={styles.safeAreaView}>
      <Modal
        animationType="slide"
        transparent={true}
        visible={modalVisible}
        onRequestClose={() => {
          Alert.alert('Modal Closed Successfully!');
          setModalVisible(!modalVisible);
        }}>
        <Pressable
          style={styles.closeX}
          onPress={() => setModalVisible(!modalVisible)}>
          <AntDesign name="closecircle" size={24} color="#000000" />
        </Pressable>
        <View style={styles.container}>
          <Text style={styles.heading}>
            {starRating !== 0 ? 'Your Rate is ${starRating}' : 'Tap to Rate'}
          </Text>
          <View style={styles.stars}>
            {starRatingOptions.map(option => (
              <TouchableWithoutFeedback
                onPressIn={() => handlePressIn()}
                onPressOut={() => handlePressOut()}
                onPress={() => setStarRating(starRating)}
                key={option}>
                <Animated.View style={animatedScaleStyle}>
                  <AntDesign
                    name={starRating >= option ? 'star' : 'staro'}
                    size={32}
                    style={
                      starRating >= option
                        ? styles.starSelected
                        : styles.starUnselected
                    }
                  />
                </Animated.View>
              </TouchableWithoutFeedback>
            ))}
            <Pressable
              style={[styles.button, styles.buttonClose]}
              onPress={() => setModalVisible(!modalVisible)}>
              <Text>Review</Text>
            </Pressable>
          </View>
        </View>
      </Modal>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safeAreaView: {
    flex: 1,
  },
  closeX: {
    alignContent: 'flex-end',
  },
  container: {
    flex: 1,
    backgroundColor: '#FFFFFF',
    alignItems: 'center',
    justifyContent: 'center',
    padding: 20,
  },
  heading: {
    fontSize: 24,
    fontWeight: 'bold',
    marginBottom: 20,
  },
  stars: {
    display: 'flex',
    flexDirection: 'row',
  },
  starUnselected: {
    color: '#AAAAAA',
  },
  starSelected: {
    color: '#FFB300',
  },
  button: {
    borderRadius: 20,
    padding: 10,
    elevation: 2,
  },
  buttonClose: {
    backgroundColor: '#F28020',
  },
});

export default App;

解决方案 #

1. 完善环境变量配置 #

• 新增 ANDROID_SDK_ROOT 系统变量，值设为 C:\Users\MyComputerName\AppData\Local\Android\Sdk（部分工具依赖该变量识别SDK）
• 更新PATH路径，将 C:\Users\MyComputerName\AppData\Local\Android\Sdk\cmdline-tools\latest\bin 加入（完整指向cmdline-tools的bin目录）
• 关闭所有终端和Android Studio，重新打开后执行 npx react-native doctor 验证SDK是否被识别

2. 解决依赖冲突 #

• package.json中同时存在 @expo/vector-icons 和 react-native-vector-icons，且版本不一致，需二选一：
  • 保留react-native-vector-icons：执行 npm uninstall @expo/vector-icons expo-font
  • 保留@expo/vector-icons：执行 npm uninstall react-native-vector-icons，并移除android/app/build.gradle中的apply from配置
• 执行 npm install 重新安装依赖，再运行 npx react-native clean 清除缓存

3. 修复代码逻辑问题 #

• 星级点击事件修正：将 onPress={() => setStarRating(starRating)} 改为 onPress={() => setStarRating(option)}，否则点击星级无法更新评分值
• 模板字符串修正：将 'Your Rate is ${starRating}' 改为 Your Rate is ${starRating}（使用反引号包裹），确保变量正常解析
• 关闭按钮样式修正：将 closeX 中的 alignContent: 'flex-end' 改为 alignSelf: 'flex-end'，并添加 margin: 20，保证按钮可见

4. 清理Android构建缓存 #

• 进入项目android目录，执行 gradlew clean 清除旧构建缓存
• 返回项目根目录，执行 npx react-native run-android 重新构建运行

内容的提问来源于stack exchange，提问作者Akirah A.