React Native Avatar.Image移除上传图片后设置默认图片/背景色咨询

结论 #

优先修改 Avatar.Image组件的渲染逻辑（备选修改位置2），无需调整removeImage函数。

原因说明 #

removeImage的核心职责是清空已选择的图片状态、弹出移除提示，逻辑本身没有问题，修改它反而会破坏状态逻辑的单一性，把渲染层的展示逻辑耦合到状态操作里，不符合逻辑分层原则。你现在遇到的蓝色占位问题，本质是pic为空时，传给Avatar.Image的source参数是无效uri，触发了组件的默认占位样式，直接在渲染层做兼容处理即可。

实现方案 #

方案1：设置自定义默认图片 #

判断pic是否为空，为空时直接传入本地默认头像资源即可：

<View>
     <Avatar.Image
        size= {150}
        source={pic ? { uri : 'data:image/png;base64,' + pic} : require('你项目里默认头像的路径，比如./assets/default_avatar.png')}
     />
</View>

方案2：仅修改默认占位颜色 #

如果不需要自定义默认图片，直接给Avatar.Image加样式修改背景色即可：

<View>
     <Avatar.Image
        size= {150}
        source={{ uri : 'data:image/png;base64,' + pic}}
        style={{ backgroundColor: '#你想要的占位颜色，比如浅灰色#f5f5f5' }}
     />
</View>

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