Question

我是新手做出反应原生，我想进行一个简单的动作，我想点击一个按钮向我展示来自uri或任何东西的在线图像。有任何想法吗？我知道如何使用一个按钮，早些时候我点击它来制作一个基本像这样的警报作为action.js：

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

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

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

也在reducer.js中就是这样：

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

但是，当我尝试显示图像时，它不起作用， action.js：

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

}

任何帮助都是有意义的，亲切的问候..

test.js：

<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

我不确定你实际渲染图像的位置。警报有效，因为您在渲染中不需要任何内容来查看它。在onPress上显示图像的简单方法是将图像的不透明度从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}
                /> 
            )
        }
    }

react-native：单击按钮显示在线图像

1 个答案: