如何改变钩子的样式？答案

【问题标题】：How to change style of a hook?如何改变钩子的样式？
【发布时间】：2021-11-23 14:45:56
【问题描述】：

我有一个设置 Hook 的 if 语句，但我想除了改变里面的文本之外，还要改变样式，可以吗？这是代码

const [ageLabel, setAgeLabel] = useState('Age');

const testDate = () => {
    let day = parseInt(dayText);
    let month = parseInt(monthText);
    let year = parseInt(yearText);
    setAgeLabel('Age');
    let label = 'Age - Please Enter a Valid Year';
    if (dayText === '' || monthText === '' || yearText === '') {
      setAgeLabel('Age - Please Enter a Valid Date');
    } else if (day < 1 || day > 31) {
      setAgeLabel('Age - Please Enter a Valid Day');
    } else if (month < 1 || month > 12) {
      setAgeLabel('Age - Please Enter a valid Month');
    } else if (year < 1900 || year > 2020) {
      setAgeLabel('Age - Please Enter a Valid Year');
    } else {
      saveUserCardData();
    }
  };

当调用 SaveUserCardData 时，它会保存数据，但我想从 ageLabel 中更改字体和颜色，我该怎么做？

谢谢！

【问题讨论】：

标签： react-native react-hooks react-native-stylesheet

【解决方案1】：

这可能会有所帮助

function App() {
  const [data, setData] = useState({label: 'Age', style: {color: 'black'}});

  useEffect(() => {
    testDate();
  });

  const testDate = () => {
    let day = parseInt(dayText);
    let month = parseInt(monthText);
    let year = parseInt(yearText);
    // setData({label: 'Age', style: {color: 'black'}});
    // let label = 'Age - Please Enter a Valid Year';
    if (dayText === '' || monthText === '' || yearText === '') {
      setData({label: 'Age - Please Enter a Valid Date', style: {color: 'red'}});
    } else if (day < 1 || day > 31) {
      setData({label: 'Age - Please Enter a Valid Day', style: {color: 'red'}});
    } else if (month < 1 || month > 12) {
      setData({label: 'Age - Please Enter a valid Month', style: {color: 'red'}});
    } else if (year < 1900 || year > 2020) {
      setData({label: 'Age - Please Enter a Valid Year', style: {color: 'red'}});
    } else {
      saveUserCardData();
    }
   };

  return (
    <View>
      <Text style={data.style}> {data.label}</Text>
    </View>
    );
  }

【讨论】：