Question

尽管有相同的标记，但我有两个图像以不同的速率出现在屏幕上。我能看到的唯一区别是，一个图像使用uri作为源，而另一个图像使用，因为它从资源目录加载。

此问题出现在模拟器和iPhone上。

代码：

＆＃13;

state = { opacity: new Animated.Value(0) };
  
  componentDidMount() {
		Animated.timing(this.state.opacity, {
			toValue: 1,
			duration: 1000
		}).start(); 
	}
  
	render() {
		return(
      <View style={{ flex: 1, backgroundColor: 'white' }} >
        
        <View style={{flex: 1}} >
        	<Animated.Image
        		style={{ flex:1, height: undefined, width: undefined, opacity: this.state.opacity }}
        		resizeMode="contain"
            source={{uri: this.props.screenProps }}
          />

        </View>

        <View>
          <Animated.Image
            source={ require('../assets/images/footer.png') }
            style={{height: 170, width: SCREEN_WIDTH, opacity: this.state.opacity}}
          />
        </View>
    </View>
		);
	}
}

＆＃13;

我希望日历引用图像和页脚图像一起加载。

Answer 1

不幸的是，当您将外部图像与本地图像混合在一起时，您将遇到此问题，而本地人将（希望）首先加载。

我会开始设置状态变量来处理显示本地图像的逻辑。

state = {
  opacity: new Animated.Value(0),
  isVisible: false
}

创建一个将修改最近添加的状态变量的函数

setVisibility = () => {
  this.setState({
    isVisible: true
  })
}

（设置状态时不需要在此处使用功能）

在render()方法内部，只需添加一些逻辑。首先，此图片将不呈现。

{this.state.isVisible &&
          <View>
            <Animated.Image
              source={require('../assets/images/footer.png')}
              style={{ height: 170, width: SCREEN_WIDTH, opacity: this.state.opacity }}
            />
          </View>}

这是真正的魔法发生的地方，React Native中的Image带有onLoadEnd事件。

加载成功或失败时调用。

您可以提供有关成功或失败的其他检查，此示例中不包含此内容。只需将onLoadEnd道具添加到外部图像组件，然后将setVisibility作为事件处理程序传递。

<Animated.Image
  style={{ flex: 1, height: undefined, width: undefined, opacity: this.state.opacity }}
  resizeMode="contain"
  source={{ uri: this.props.screenProps }}
  onLoadEnd={this.setVisibility}
/>

您可以在世博会here上看到一个例子。

图像以不同的速率加载：uri vs require？

1 个答案: