react-native - 带有签名 URL 的 React Native 图像褪色（谷歌云存储）

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>
  )
}

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

标签： react-nativegoogle-cloud-storage

Answer 1

尝试添加其他条件：

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