1

我的 RN 应用程序中有以下代码。

 <TouchableOpacity
   // onPress={onPress}
   onPressIn={this.handlePressIn}
   onPressOut={this.handlePressOut}
   disabled={disabled}
   style={[
     styles.button,
     buttonStyle,
     this.buttonStyles(),
   ]}
   >
     <Text>Hello</Text>
   </TouchableOpacity> 

我想在按下时更改 TouchableOpacity 的颜色。因此,在 onPressIn 中,我将颜色更改为深红色,但它显示为浅红色或类似的颜色。那里不能设置深色。这里有什么问题?在我 onPressOut 之前如何更改颜色?颜色应该是深色的。

4

2 回答 2

4

找到了解决方案。在 TouchableOpacity 中设置 activeOpacity={1}。

 <TouchableOpacity
   onPress={onPress}
   activeOpacity={1}
/>
于 2019-07-12T12:16:37.323 回答
3

编辑:

我想我对它进行了过度设计。你可以简单地使用activeOpacity={1}道具。

问题:

问题是它TouchableOpacity已经通过降低按钮的不透明度来提供反馈,允许在用户按下时看到背景。所以即使你改变了按钮的背景色,你也不会注意到它。幸运的是,我有一个解决方案给你。

解决方案:

您可以TouchableWithoutFeedback与其他视图一起使用来创建您想要的行为。

代码:

<TouchableWithoutFeedback
onPressIn={() => this.setState({pressIn: true })}
onPressOut={() => this.setState({pressIn: false})}
>
<View
// change the color depending on state 
style={{ backgroundColor: this.state.pressIn ? '#4c7d4c': '#98FB98'}} 
>
   <Text> Custom Button </Text>
</View>
</TouchableWithoutFeedback>

输出:

演示

工作示例:

https://snack.expo.io/@tim1717/quiet-watermelon

于 2019-07-12T12:07:09.690 回答