React Native 本地图像在内容加载一秒后加载

Question

我有一张本地图片用作背景图片。它在其余内容加载后大约一秒加载。

<Image source={require('./assets/climbing_mountain.jpeg')} style={styles.imageContainer}>  

imageContainer: {
  flex: 1,
  width: null,
  height: null,
}

有没有办法在加载图片后加载内容？我尝试使用 onLoad and onLoadEnd 道具，但它们在图像加载之前被解雇了。

Answer 1

是的..实际上并没有那么简单，您需要使用图像预取..检查这个link：React Image prefetch

或者实际上你可以试试这个：

    <Image
     onLoadEnd={()=>this.setState({loadEnd:true})}
     source={require('./assets/climbing_mountain.jpeg')}
     style={styles.imageContainer}>

在渲染方法中你可以做一些我不推荐的事情：

render(){
  if(!this.state.loadEnd) {
    return(
        <Image
         key='image_key'
         onLoadEnd={()=>this.setState({loadEnd:true})}
         source={require('./assets/climbing_mountain.jpeg')}
         style={styles.imageContainer}> 
    )
  }else {
    return (
      <View>
        ....
        <Image
         key='image_key'
         onLoadEnd={()=>this.setState({loadEnd:true})}
         source={require('./assets/climbing_mountain.jpeg')}
         style={styles.imageContainer}> 
        </view>
        ....
    )
  }
}

React Native 本地图像在内容加载一秒后加载

React Native local image loads a second after content

react-native

react-native-android