如何在Expo中实现点击按钮切换显示图片的功能？

React 生态（包括 Expo 开发的 React Native 应用）的组件重新渲染依赖状态变更触发，你使用普通let关键字定义的imageUri属于普通JS变量，直接修改该变量不会通知组件进行重绘，所以界面上的图片不会同步更新。

• 首先在组件顶部引入useState状态钩子

import { useState } from 'react';

• 将原本普通变量定义的imageUri替换为响应式状态变量，初始值保持你原来的默认图片地址

const [imageUri, setImageUri] = useState({uri:  'https://images.unsplash.com/photo-1615789591457-74a63395c990?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8ZG9tZXN0aWMlMjBjYXR8ZW58MHx8MHx8&w=1000&q=80'});

• 修改displayImage函数，调用状态更新方法setImageUri修改图片地址，你当前的逻辑没有异步操作，可以去掉多余的async关键字

const displayImage = () => {
  setImageUri({uri: 'https://images.unsplash.com/photo-1529778873920-4da4926a72c2?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxzZWFyY2h8MXx8Y3V0ZSUyMGNhdHxlbnwwfHwwfHw%3D&w=1000&q=80'})
}

• 原有页面渲染代码无需调整，状态更新后会自动触发组件重绘，加载新的猫咪图片。

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