プレスイベントに応答して画像ソースを更新する方法

Question

touchableOpacityコンポーネントに.png画像ファイルが含まれています。画像ソースの1つを変更し、変更イベントをonPressイベントにバインドします。私は現在

source: require('someSource.png') 

ようgetInitialState（中プロップ）としてソースを初期化したonPress関数へ

this.setState({source: require('someOtherSource.png')}); 

を実装します。何とかresizeMode： 'contains'をイメージスタイルに追加したので、イメージのサイズはそれに応じて変更されます。しかし、2番目の画像ファイルはビューにロードされませんでした。 画像表示部分：ので、私はdoRegisterでSETSTATE機能があるかもしれない呼び出すと思っ

this.setState({source: require('someOtherSource.png')}); 

私がイメージソースの3つの状態があります

<TouchableOpacity style={styles.newUserRegister} 
        onPress={this.doRegister}> 
       <Image style={styles.accNewUser} source={this.state.source}/> 
</TouchableOpacity> 

とdoRegister（）関数の中でより良い解決策。場合も

それはスタイリングに問題がある場合、これは私があなたのケースのために、この例をしたaccNewUser

accNewUser:{ 
    marginTop:5, 
    resizeMode: 'contain', 
    alignItems: 'center', 
}, 

Answer 1

のスタイルです：https://rnplay.org/apps/jePI5Q

残念ながらRNPlayは資産を追加することはできません、だから私はuriの参照で外部画像を使用しなければならなかった。これらの参照をrequire(<asset>)と置き換えるだけで問題ありません。

この例では、defaultSource（矢印上）ともう一方（矢印下）の間で状態を切り替えることができます。