イメージは異なる速度で読み込みます：uri vs require？

Question

同じマークアップにもかかわらず、異なるレートで画面に表示される2つの画像があります。私が見ることのできる唯一の違いは、uriをソースとして使用する1つのイメージと、assetsディレクトリからロードされる際に必要となる他のイメージです。

この問題は、シミュレータとiPhoneに表示されます。

コード：

state = { opacity: new Animated.Value(0) }; 
 
    
 
    componentDidMount() { 
 
\t \t Animated.timing(this.state.opacity, { 
 
\t \t \t toValue: 1, 
 
\t \t \t duration: 1000 
 
\t \t }).start(); 
 
\t } 
 
    
 
\t render() { 
 
\t \t return(
 
     <View style={{ flex: 1, backgroundColor: 'white' }} > 
 
     
 
     <View style={{flex: 1}} > 
 
     \t <Animated.Image 
 
     \t \t style={{ flex:1, height: undefined, width: undefined, opacity: this.state.opacity }} 
 
     \t \t 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> 
 
\t \t); 
 
\t } 
 
}

私は一緒にロードするカレンダーの引用画像とフッターの画像をしたいと思います。

Answer 1

残念なことに、ローカルイメージと外部イメージを混在させると、ローカルイメージがローカルイメージと最初に読み込まれる場所でこの問題が発生します。

ローカルイメージを表示するロジックを処理するために、状態変数の設定を開始します。

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

単に追加し、あなたのrender()法の内部変数

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

（状態を設定するときに、ここでの機能を利用するための本当の必要性）

をあなたの最近追加された状態を変更する関数を作成します。いくつかの論理。最初はこの画像はではなく、がレンダリングされます。本当の魔法が起こる場所ネイティブonLoadEndイベントが付属していますリアクトに

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

はここで、Imageです。

ロードが成功または失敗すると呼び出されます。

成功または失敗の追加チェックを行うことができますが、この例には含まれていません。 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} 
/> 

Expo hereに例があります。