2017-02-17 33 views
0

私は画像をonTouchStart onとonReleaseに変更する簡単な画像ボタンを持っています。 iOsでは、それは期待どおりに動作しますが、Androidでは画像が変化するとボタンが点滅します。 私はそれに触れるたびにイメージを再度読み込む必要があるようです。React Native - Androidで画像ボタンがなぜ点滅しますか?

class MyApp extends React.Component { 
 

 
    constructor(props) { 
 
     super(props); 
 
    } 
 

 
    render() { 
 
     return (
 
      <View style={ styles.container }> 
 
       <ImageButton 
 
        style={ styles.button }/> 
 
      </View> 
 
     ); 
 
    } 
 
} 
 
class ImageButton extends React.Component { 
 

 
    constructor(props: {}) { 
 
     super(props); 
 

 
     this.image = { 
 
      normal: require('./img/button.png'), 
 
      highlight: require('./img/button-touched.png') 
 
     }; 
 

 
     this.state = { 
 
      image: this.image.normal 
 
     }; 
 
    } 
 

 
    onTouchStart() { 
 
    
 
     // do some stuff 
 
     
 
     // set the highlighted image 
 
     this.setState({ 
 
      image: this.image.highlight 
 
     }); 
 
    } 
 

 
    onTouchEnd() { 
 
     this.setState({ 
 
      image: this.image.normal 
 
     }) 
 
    } 
 

 
    onTouchCancel() { 
 
     this.setState({ 
 
      image: this.image.normal 
 
     }); 
 
    } 
 

 
    componentWillReceiveProps(nextProps) { 
 
     this.setState({ 
 
      image: nextProps.image.normal 
 
     }); 
 
    } 
 

 
    render() { 
 
     return (
 
      <View style={ this.props.style } 
 
        onStartShouldSetResponder={() => true } 
 
        onResponderGrant={ this.onTouchStart.bind(this) } 
 
        onResponderRelease={ this.onTouchEnd.bind(this) } 
 
        onResponderTerminate={ this.onTouchCancel.bind(this) } 
 
        onResponderReject={ this.onTouchCancel.bind(this) }> 
 
       <Image style={ styles.image } source={ this.state.image } resizeMode="stretch" /> 
 
      </View> 
 
     ); 
 
    } 
 
} 
 

 
const styles = StyleSheet.create({ 
 
    container: { 
 
     flex: 1, 
 
     justifyContent: 'center', 
 
     alignItems: 'center', 
 
     backgroundColor: '#E4E4E4', 
 
    }, 
 
    button: { 
 
     backgroundColor: 'transparent', 
 
    }, 
 
}); 
 

 
AppRegistry.registerComponent('schwein',() => Schwein);

答えて

1

画像はので、これが実際に起こってかもしれない私の知る限り、各プラットフォーム上で若干異なる実装されています。これらの画像を最初にロードしてコンポーネントを作成し、スタイルで定義された不透明度を使用して可視性を制御することをお勧めします。それは点滅することなく、期待どおりに動作するはずです。

関連する問題