React Native Image Picker选择图片后无法更新头像问题求助

核心问题分析 #

你的代码仅打印了图片选择的响应结果，但没有调用状态更新函数setImage修改image状态，导致Avatar组件无法触发重新渲染。另外还有两处细节问题需要修正：

1. 初始本地图片的source写法错误，本地静态资源需用require()而非uri格式
2. openImageGallery函数在函数组件中未用const声明，存在作用域隐患

修正后的完整代码 #

import { Icon, Avatar } from "@rneui/themed";
import React, { useState } from "react";
import { launchImageLibrary } from "react-native-image-picker";
import {
  SafeAreaView,
  ScrollView,
  StyleSheet,
  View,
  KeyboardAvoidingView,
} from "react-native";

export default function ImagePickerExample(props) {
  // 本地静态资源用require引入
  const [image, setImage] = useState(require("../../assets/image/xyz.png"));

  const openImageGallery = () => {
    launchImageLibrary({ noData: false }, (response) => {
      console.log('response = ', response);
      // 判断是否成功选中图片，从assets数组取uri
      if (response.assets && response.assets.length > 0) {
        const selectedImageUri = response.assets[0].uri;
        // 更新状态，临时文件用{ uri: ... }格式
        setImage({ uri: selectedImageUri });
      }
    });
  };

  return (
    <SafeAreaView>
      <ScrollView>
        <View style={styles.container}>
          <KeyboardAvoidingView>
            <View>
              <View
                style={{
                  flexDirection: "row",
                  justifyContent: "space-around",
                  marginBottom: 20,
                }}
              >
                <Avatar
                  size={150}
                  rounded
                  source={image}
                  containerStyle={{ backgroundColor: "grey" }}
                >
                  <Avatar.Accessory 
                    size={30}
                    onPress={openImageGallery}
                  />
                </Avatar>
              </View>
            </View>
          </KeyboardAvoidingView>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  container: {
    padding: 20,
  },
});

关键修改点说明 #

• 触发组件更新：在图片选择成功后，从response.assets[0]获取图片uri，调用setImage更新状态，触发Avatar重新渲染
• 规范资源引入：初始本地图片改用require方式，符合React Native静态资源加载规则
• 函数作用域修正：用const声明openImageGallery函数，避免函数组件中的作用域问题
• 增加边界判断：通过response.assets && response.assets.length > 0判断，防止用户取消选择时出现报错

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