反応するネイティブ：オンライン画像を表示するボタンをクリック

Question

私はネイティブに反応するために新しいです、そして、私は簡単な操作を進めたい、私はボタンをクリックして私にウリなどのオンライン画像を表示したい。何か案は？

export const doAlert =() => { alert("ATTENTION!!!"); return {type: actionTypes.DO_ALERT} }

と私のtest.jsに私はこの

<Button  
onPress={this.props.doAlert} 
title= "Click to alert" 
/> 

のようでした：私は、以前私がaction.jsとして基本的に次のように警告を作ってそれをクリックし、ボタンを使用する方法を知っています私はそれが仕事をdoesntの画像、 action.jsを表示するには、これをしようとすると、しかし

const DEFAULT_STATE = {onTest:true} export default function (state = DEFAULT_STATE, action) { 
switch (action.type){ 
    case actionTypes.DO_ALERT: 
      return {...state, doAlert: true} 
      } 

：それはこのようなものだったreducer.jsでも

export const showImage =() => { 
return (dispatch,getState) =>{ 
    Actions.toSource() 
    return {type: actionTypes.SHOW_IMAGE} 
} 

}

任意のヘルプは、 よろしく..

test.js appretiatedさ：

<Button title="click me" 
    onPress= {this.props.showImage} 
/> 

reducer.js：

case actionTypes.SHOW_IMAGE: 
     source={uri: 'https://facebook.github.io/react/img/logo_og.png'} 
     state.source 
      return {...state, source : true} 

Answer 1

私は」をあなたがどこにいるのかわからないctuallyレンダリング画像。 Alertは、レンダリングの内部に何も必要ないため、表示されます。

import React, { Component } from 'react'; 
    import { Button, Image } from 'react-native'; 

    export default class ImageTest extends Component { 

     constructor() { 
      super(); 
      this.state = { 
       imgOpacity: 0 
      } 
     } 

     toggleImage() { 
      if (this.state.imgOpacity === 1) { 
       this.setState({ 
        imgOpacity: 0 
       })  
      } else { 
       this.setState({ 
        imgOpacity: 1 
       }) 
      } 
     } 

     render() { 
      return(
       <Image 
        style={{width: 50, height: 50, opacity: this.state.imgOpacity}} 
        source={{uri:'https://some-url'}} 
       /> 
       <Button title="click me" 
        onPress= {this.toggleImage} 
       /> 
      ) 
     } 
    }