我想在按下应用中的按钮时更改按钮的样式。最佳方法是什么?
wnrlj8wa1#
使用TouchableHighlight。下面是一个例子:
TouchableHighlight
import React from 'react'; import { TouchableHighlight, View, Text, StyleSheet } from 'react-native'; export default function Button() { var [ isPress, setIsPress ] = React.useState(false); var touchProps = { activeOpacity: 1, underlayColor: 'blue', // <-- "backgroundColor" will be always overwritten by "underlayColor" style: isPress ? styles.btnPress : styles.btnNormal, // <-- but you can still apply other style changes onHideUnderlay: () => setIsPress(false), onShowUnderlay: () => setIsPress(true), onPress: () => console.log('HELLO'), // <-- "onPress" is apparently required }; return ( <View style={styles.container}> <TouchableHighlight {...touchProps}> <Text>Click here</Text> </TouchableHighlight> </View> ); } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'center', alignItems: 'center', }, btnNormal: { borderColor: 'blue', borderWidth: 1, borderRadius: 10, height: 30, width: 100, }, btnPress: { borderColor: 'blue', borderWidth: 1, height: 30, width: 100, } });
mrwjdhj32#
React Native现在提供了一个新的Pressable组件,可以检测新闻交互的各个阶段。因此,为了改变组件的颜色(通常是任何风格),请参考下面的示例:
Pressable
<Pressable style={({ pressed }) => [{ backgroundColor: pressed ? 'black' : 'white' }, styles.btn ]}> {({ pressed }) => ( <Text style={[{ color: pressed ? 'white' : 'black' }, styles.btnText]}> {text} </Text> )} </Pressable>
代码分解:
style={({ pressed }) => [{ backgroundColor: pressed ? 'black' : 'white' }, styles.btn ]}
这里样式属性接收pressed(boolean),它反映Pressable是否被按下,并返回一个样式数组。
{({ pressed }) => ( <Text style={[{ color: pressed ? 'white' : 'black' }, styles.btnText]}> {text} </Text> )}
这里的文本样式也可以修改,因为pressed也可以被Pressable组件的子组件访问。
pressed
zlhcx6iw3#
使用 prop :
underlayColor <TouchableHighlight style={styles.btn} underlayColor={'gray'} />
https://reactnative.dev/docs/touchablehighlight
31moq8wy4#
这是Besart Hoxhaj在ES6中的答案。当我回答这个时,React Native是0.34。
import React from "react"; import { TouchableHighlight, Text, Alert, StyleSheet } from "react-native"; export default class TouchableButton extends React.Component { constructor(props) { super(props); this.state = { pressed: false }; } render() { return ( <TouchableHighlight onPress={() => { // Alert.alert( // `You clicked this button`, // 'Hello World!', // [ // {text: 'Ask me later', onPress: () => console.log('Ask me later pressed')}, // {text: 'Cancel', onPress: () => console.log('Cancel Pressed'), style: 'cancel'}, // {text: 'OK', onPress: () => console.log('OK Pressed')}, // ] // ) }} style={[ styles.button, this.state.pressed ? { backgroundColor: "green" } : {} ]} onHideUnderlay={() => { this.setState({ pressed: false }); }} onShowUnderlay={() => { this.setState({ pressed: true }); }} > <Text>Button</Text> </TouchableHighlight> ); } } const styles = StyleSheet.create({ button: { padding: 10, borderColor: "blue", borderWidth: 1, borderRadius: 5 } });
55ooxyrt5#
使用类似的东西:
class A extends React.Component { constructor(props){ super(props); this.state = { onClicked: false } this.handlerButtonOnClick = this.handlerButtonOnClick.bind(this); } handlerButtonOnClick(){ this.setState({ onClicked: true }); } render() { var _style; if (this.state.onClicked){ // clicked button style _style = { color: "red" } } else{ // default button style _style = { color: "blue" } } return ( <div> <button onClick={this.handlerButtonOnClick} style={_style}>Press me !</button> </div> ); } }
如果使用外部CSS,可以使用className代替style属性:
render() { var _class = "button"; var _class.concat(this.state.onClicked ? "-pressed" : "-normal") ; return ( <div> <button onClick={this.handlerButtonOnClick} className={_class}>Press me !</button> </div> ); }
如何应用CSS并不重要,只要关注“handlerButtonOnClick”方法即可。当状态改变时,组件被重新呈现(“render”方法被再次调用)。Good luck ;)
5条答案
按热度按时间wnrlj8wa1#
使用
TouchableHighlight
。下面是一个例子:
mrwjdhj32#
React Native现在提供了一个新的
Pressable
组件,可以检测新闻交互的各个阶段。因此,为了改变组件的颜色(通常是任何风格),请参考下面的示例:代码分解:
这里样式属性接收pressed(boolean),它反映
Pressable
是否被按下,并返回一个样式数组。这里的文本样式也可以修改,因为
pressed
也可以被Pressable
组件的子组件访问。zlhcx6iw3#
使用 prop :
https://reactnative.dev/docs/touchablehighlight
31moq8wy4#
这是Besart Hoxhaj在ES6中的答案。当我回答这个时,React Native是0.34。
55ooxyrt5#
使用类似的东西:
如果使用外部CSS,可以使用className代替style属性:
如何应用CSS并不重要,只要关注“handlerButtonOnClick”方法即可。
当状态改变时,组件被重新呈现(“render”方法被再次调用)。
Good luck ;)