使用签名URL (google云存储)反应原生图像淡入淡出

Question

我使用asyncStorage保存用户配置文件。当我从后端请求用户信息时，它会响应不同的头像url但相同的图像。而react native可能因为url不同而重新呈现图像组件。并且它会导致图像淡出效果的淡出。

下面是演示：

export default _ => {
  const [user, setUser] = React.useState({}) 

  React.useEffect(_ => {

    _getUser()

  }, [])

  _getUser = async _ =>
  {
    const saved = await AsyncStorage('user')
    if (saved)
      setUser(JSON.parse(saved))

    _fetchUser()
  }


  _fetchUser = async _ =>
  {
    const response = await fetch()
    setUser(response)

    await AsyncStorage.setItem('user', JSON.stringify(response))
  }

  return (
    <View>
      <Image source={{uri: user.avatar}} />
    </View>
  )
}

那么，如何防止重新渲染或淡入/淡出效果？

Answer 1

尝试添加else条件：

 _getUser = async _ =>
  {
    const saved = await AsyncStorage('user')
    if (saved) {
      setUser(JSON.parse(saved))
    } else {
      _fetchUser()
    }
  }