javascript - How to briefly change the background color on touch in react native? - Stack Overflow

admin管理员组

文章数量:1410682

In mobile apps, it is critical to show some sort of indication that the user has touched a specific element, especially when trying to touch an element that will redirect. Hence, I was hoping to change the background colour of touchableOpacity element on touch, and then return back to the original background colour.

For example, if the user touches this element:

The background colour is changed on touch.

How do I do this in touchableOpacity?

<TouchableOpacity 
  style={[styles.verticalCenter, styles.floatRight]} 
  activeOpacity={1.0} 
  underlayColor="rgba(253,138,94,0)" 
  onPress={()=> this.openModal()} 
>
  <Ionicons name="log-out" size={16} color="#bccad0" />
</TouchableOpacity>

---

floatRight: {
  flex: 1,
  alignItems: 'center',
  borderWidth: 1,
  borderColor: 'rgba(0,0,0,0.2)',
  justifyContent: 'center',
  width: 30,
  height: 30,
  backgroundColor: '#fff',
  borderRadius: 100 / 2,
},

The above just doesn't work.

Any help would be appreciated.

In mobile apps, it is critical to show some sort of indication that the user has touched a specific element, especially when trying to touch an element that will redirect. Hence, I was hoping to change the background colour of touchableOpacity element on touch, and then return back to the original background colour.

For example, if the user touches this element:

The background colour is changed on touch.

How do I do this in touchableOpacity?

<TouchableOpacity 
  style={[styles.verticalCenter, styles.floatRight]} 
  activeOpacity={1.0} 
  underlayColor="rgba(253,138,94,0)" 
  onPress={()=> this.openModal()} 
>
  <Ionicons name="log-out" size={16} color="#bccad0" />
</TouchableOpacity>

---

floatRight: {
  flex: 1,
  alignItems: 'center',
  borderWidth: 1,
  borderColor: 'rgba(0,0,0,0.2)',
  justifyContent: 'center',
  width: 30,
  height: 30,
  backgroundColor: '#fff',
  borderRadius: 100 / 2,
},

The above just doesn't work.

Any help would be appreciated.

• javascript
• android
• reactjs
• react-native
• touchableopacity

Share Improve this question Follow edited Jan 21, 2018 at 22:12 user555121 asked Jan 21, 2018 at 22:10 S. NasS. Nas 33111 gold badge55 silver badges1414 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

Use TouchableHighlight instead of TouchableOpacity

<TouchableHighlight
    activeOpacity={0.6}
    underlayColor="#DDDDDD"
    onPress={() => alert('Pressed!')}>
    <MyComponent />
</TouchableHighlight>;

If you set activeOpacity={0.2} it will make the background lighter. As you are setting opacity to 1 it doesn't change on click.

本文标签： javascriptHow to briefly change the background color on touch in react nativeStack Overflow