反应原生 :单击按钮以显示在线图像

Question

我是本地反应的新手，我想进行一个简单的操作，我想单击一个按钮向我显示来自 uri 或任何内容的在线图像。有什么想法吗？我知道如何使用按钮，之前我点击它来发出警报，基本上是这样的操作.js：

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

在我的测试中.js我确实喜欢这个

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

同样在减速器中.js它是这样的：

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

但是，当我尝试这样做来显示图像时，它不起作用，操作.js：

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

}

任何帮助都会得到认可，亲切问候。。

测试.js：

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

减速机.js ：

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

Answer 1

我不确定您实际在哪里渲染图像。警报之所以有效，是因为渲染中不需要任何内容即可查看它。使图像显示在 Press 上的一种简单方法是将图像的不透明度从 0 更改为 1。

像这样：

    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}
                /> 
            )
        }
    }