React Native异步场景下按钮点击无响应问题求助

看起来你的代码逻辑框架是对的，但点击按钮后上传没反应大概率是几个容易忽略的细节导致的，我帮你一步步排查：

1. 核心问题：Firebase未初始化 #

你导入了firebaseConfig，但完全没有调用Firebase的初始化方法！这是最常见的“静默失败”原因——Firebase所有服务都需要先初始化才能正常工作，未初始化时调用Storage方法不会抛出明显错误，但所有操作都会无响应。

在文件开头添加初始化代码（注意要避免重复初始化）：

import * as firebase from 'firebase';
import {firebaseConfig} from "./ApiKeys";

// 新增：确保Firebase只初始化一次
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

2. 修复错误提示的显示问题 #

你的catch块直接把error对象传给Alert.alert()，但Alert无法直接渲染Error对象，导致你看不到真正的错误信息，就算上传失败也不知道原因。修改成：

.catch((error) => {
  Alert.alert("上传失败", error.message);
});

现在如果上传出错，你就能看到具体的错误描述，方便进一步排查。

3. 确认Expo权限配置 #

虽然你能触发Alert，但需要确保app.json里已经配置了相机/相册的权限，否则可能导致图片选择后无法获取到有效URI：
在app.json的expo字段下添加权限配置：

"expo": {
  // ...其他配置
  "permissions": [
    "camera",
    "cameraRoll"
  ]
}

4. 检查Firebase Storage安全规则 #

如果你的Firebase Storage规则是默认的allow read, write: if request.auth != null;，但App没有做用户登录，上传请求会被静默拒绝。可以先临时修改规则测试（测试完成后记得改回安全配置）：

rules_version = '2';
service firebase.storage {
  match /b/{bucket}/o {
    match /{allPaths=**} {
      allow read, write: if true;
    }
  }
}

修改后的完整代码参考 #

import React from 'react';
import { Image, StyleSheet, Button, Text, View, Alert, } from 'react-native';
import { ImagePicker } from 'expo';
import * as firebase from 'firebase';
import {firebaseConfig} from "./ApiKeys";

// 初始化Firebase
if (!firebase.apps.length) {
  firebase.initializeApp(firebaseConfig);
}

export default class HomeScreen extends React.Component {
  static navigationOptions = {
    header: null,
  };

  onChooseImagePress = async () => {
    let result = await ImagePicker.launchCameraAsync();
    //let result = await ImagePicker.launchImageLibraryAsync();
    if (!result.cancelled) {
      this.uploadImage(result.uri, "test-image")
        .then(() => {
          Alert.alert("Success");
        })
        .catch((error) => {
          Alert.alert("上传失败", error.message);
        });
    }
  }

  uploadImage = async (uri, imageName) => {
    const response = await fetch(uri);
    const blob = await response.blob();
    var ref = firebase.storage().ref().child("images/" + imageName);
    return ref.put(blob);
  }

  render() {
    return (
      <View style={styles.container}>
        <Button title="Choose image..." onPress={this.onChooseImagePress} />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 50,
    alignItems: "center",
  },
});

按上面的步骤排查后，应该就能解决上传无响应的问题了。如果还是有问题，现在错误提示能正常显示，把具体的错误信息贴出来就能进一步定位啦。

内容的提问来源于stack exchange，提问作者Savad