首页 > RN 中如何设置Button高亮时的图片

RN 中如何设置Button高亮时的图片

<TouchableHighlight>
    <Image
        style={styles.header_button}
        source={require('image!home_btn')} />
</TouchableHighlight>

我还有一张home_btn_pressed的图片,如何设置?
必须采用state里面的属性,绑定然后刷新这个界面么?没有自带属性或者设置直接像iOS的Button setImage for uicontrolstateHightlight?


没有,Touchable...与Image都是两个东西,你只能用状态机变量来做这事儿。
话说,做这事儿有意义吗?用户按一个按钮,通常马上就松开手指了。


React Native内部还真没有双态/三态按钮组件。你可以用View实现一个(本身Touchable*系列组件就是用View封装的)。如果嫌麻烦的话,你还可以用TouchableWithoutFeedback,配合它的onPressIn和onPressOut回调,调整当前组件的state,来显示不同的图片。

需要注意的是,在RN中,如果你切换图片的source,可能会出现短暂的闪烁。要解决这个问题,你需要提前创建好两个Image,分别使用两个状态的图片,然后根据状态来调整两个Image的尺寸(或定位),使得其中一个可见。

【热门文章】
【热门文章】