react-native - 如何根据情况更改图像源

Question

当组件第一次呈现this.props.navigation.getParam('Image')未定义时，因此<Image>需要 this.state.Image，而当this.props.navigation.getParam('Image') 未定义时，我将其作为 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>
)
}

标签： react-native

Answer 1

你可以有 2<Image>个用于 'require' 一个用于 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