使用 TouchableHighlight 更改字体颜色

Posted 2023-03-07

【中文标题】使用 TouchableHighlight 更改字体颜色

【英文标题】：Change font color with TouchableHighlight

【发布时间】：2020-08-26 01:42:03

【问题描述】：

如何更改按钮的字体颜色，问题是字体颜色不好看所以每次用户点击按钮时我也需要更改字体颜色。

我的做法：

普通按钮

按下按钮

<TouchableHighlight
        underlayColor="#E5E6EA"
        onPress=onOpen2
        style=
          fontFamily: "AktivGroteskCorp",
          paddingLeft: 15,
          paddingRight: 15,
          borderRadius: 25.5,
          flexDirection: "row",
          justifyContent: "center",
          marginBottom: 15,
          width: vw * 67.2,
          height: vw * 13.6,
          alignItems: "center",
          alignSelf: "center",
          borderColor: "#E5E6EA",
          borderWidth: 1,
        
      >
        <Text
          style=
            color: "#ffffff",
            fontWeight: "bold",
            fontSize: 16,
            textAlign: "center",
            alignSelf: "center",
          
        >
          LOG IN
        </Text>
      </TouchableHighlight>

【参考方案1】：

这是一个函数式的方式

首先，创建 useState，然后在 onPressIn/onPressOut 上对其进行操作

const TouchableHighlightExample = () => 
  const [BtnColor, setBtnColor] = useState("red");
  return (
    <View>
      <TouchableHighlight onPressIn=()=>setBtnColor("blue") onPressOut=()=>setBtnColor("red")>
        <View>
          <Text style=color: BtnColor>Touch Here</Text>
        </View>
      </TouchableHighlight>
    </View>
  );
 

【参考方案2】：

使用onPressIn 和onPressOut

https://reactnative.dev/docs/pressable#onpressin

state = 
  fontColor: 'red',

<TouchableHighlight
    onPressIn=()=> this.setState(fontColor:'blue');
    onPressOut=()=> this.setState(fontColor:'red');
  >
    <Text
      style=
        color: this.state.fontColor,
      
    >
      LOG IN
    </Text>
  </TouchableHighlight>

【讨论】：

不知道react上怎么用class，我一般都是用function