在React Native中,如果你想要仅更改活动按钮的背景颜色,你可以使用TouchableOpacity
或TouchableHighlight
组件,并通过状态来控制按钮的样式。以下是一个简单的例子:
import React, { useState } from 'react';
import { View, TouchableOpacity, Text, StyleSheet } from 'react-native';
const App = () => {
const [isActive, setIsActive] = useState(false);
return (
<View style={styles.container}>
<TouchableOpacity
style={[styles.button, isActive && styles.activeButton]}
onPress={() => setIsActive(!isActive)}
>
<Text style={styles.buttonText}>{isActive ? 'Active' : 'Inactive'}</Text>
</TouchableOpacity>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
justifyContent: 'center',
alignItems: 'center',
},
button: {
padding: 10,
borderRadius: 5,
backgroundColor: '#DDDDDD',
},
activeButton: {
backgroundColor: '#007AFF',
},
buttonText: {
color: 'white',
fontSize: 18,
},
});
export default App;
useState
钩子来管理按钮的激活状态。onPress
事件处理函数是否正确调用了setIsActive
。通过这种方式,你可以轻松地控制按钮的背景颜色,以反映其激活状态。
领取专属 10元无门槛券
手把手带您无忧上云