Question

当组件第一次渲染时，this.props.navigation.getParam('Image')不确定，因此<Image>占据this.state.Image，而当this.props.navigation.getParam('Image')不确定时，我将其视为图像。但是，当我长按按钮时，我想将默认值成像为require('../Images/add2.png')。我做不到任何帮助

state= {
  Images : require('../Images/add2.png'),
}

    render() {

    return (
         <View>
    <TouchableOpacity   onPressIn={() => this.setState({ buttonPress: 'short' })} 
                        onLongPress={() => this.setState({ buttonPress: 'long' })} 
                        onPressOut={() => {
                            const { buttonPress } = this.state; 
                            if (buttonPress === 'short')
                            {

                            }
                            else if (buttonPress === 'long')
                            {
                                this.setState({ ButtonImage: require('../Images/add2.png') });
                            }
                            this.setState({ buttonPress: 'none' });
                        }}>
       --------->    <Image source={ this.props.navigation.getParam('Image') !== undefined ? { uri: this.props.navigation.getParam('Image') } : this.state.Images } style={{ height: 30, width: 30 }} />

    </TouchableOpacity>
     </View>
)
}

Answer 1

您可以有2个<Image>用于“要求”一个，用于uri。

return (
     <View>
<TouchableOpacity   
   onPressIn={() => this.setState({ buttonPress: 'short' })} 
   onLongPress={() => this.setState({ buttonPress: 'long' })} 
   onPressOut={() => {
     const { buttonPress } = this.state; 
     if (buttonPress === 'short'){


     }
     else if (buttonPress === 'long'){
        this.setState({ ButtonImage: require('../Images/add2.png') });
     }
     this.setState({ buttonPress: 'none' });
   }}>
   {this.state.localImage?<Image source={ require('../Images/add2.png') } style={{ height: 30, width: 30 }} />
   :
    <Image source={ uri:this.state.image } style={{ height: 30, width: 30 }} />
    }

</TouchableOpacity>
 </View>

）

保存您要显示的本地文件（'../Images/add2.png'），将this.state.localImage设置为true，然后将网址保存在this.state.image

如何根据情况更改图像来源

1 个答案: