【问题标题】：TouchableOpacity change color of text on clickTouchableOpacity 单击时更改文本的颜色
【发布时间】：2021-05-28 18:45:31
【问题描述】：

我是编码新手，React 也是新手，我试图通过单击更改我的文本颜色（然后再次单击以更改回原始颜色）。

  function lastTouches() {
    
      return (
        <Box>
          <Box>
            <TouchableOpacity>
              <Text>
                Change Color
              </Text>
            </TouchableOpacity>
        </Box>
      );
    }
    
    export default lastTouches;

【问题讨论】：

您阅读文档了吗？ React Native / Docs / TouchableOpacity

标签： javascript css reactjs react-native

【解决方案1】：

如果要更改按钮的文本，则必须为 <Text> 组件定义样式。

<Text style={{ color: /* state value here */ }}>Press Here</Text>

示例

下面的代码是文档中功能组件示例的一个分支。

见：React Native / Docs / TouchableOpacity

import React, { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 10
  },
  button: {
    alignItems: "center",
    backgroundColor: "#DDDDDD",
    padding: 10,
    border: "thin solid grey"
  }
});

const App = () => {
  const [active, setActive] = useState(false);
  const onPress = () => setActive(!active);

  const buttonTextStyle = {
    color: active ? 'green' : 'red'
  };

  return (
    <View style={styles.container}>
      <TouchableOpacity
        style={styles.button}
        onPress={onPress}
      >
        <Text style={buttonTextStyle}>Press Here</Text>
      </TouchableOpacity>
    </View>
  );
};

export default App;

如果您希望每个按钮独立运行，则需要创建一个新组件。

import React, { useState } from "react";
import { StyleSheet, Text, TouchableOpacity, View } from "react-native";

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 10,
    gap: 10
  },
  button: {
    alignItems: "center",
    backgroundColor: "#DDDDDD",
    padding: 10,
    border: "thin solid grey"
  }
});

const StatefulButton = (props) => {
  const { color, activeColor } = props;
  const [active, setActive] = useState(false);
  const onPress = () => setActive(!active);
  const buttonTextStyle = {
      color: active ? activeColor : color,
      fontStyle: active ? 'unset' : 'italic',
      fontWeight: active ? 'bold' : 'normal'
    };
  return (
    <TouchableOpacity style={styles.button} onPress={onPress}>
      <Text style={buttonTextStyle}>Press Here</Text>
    </TouchableOpacity>
  );
};

const App = () => {
  return (
    <View style={styles.container}>
      <StatefulButton color="red" activeColor="green" />
      <StatefulButton color="magenta" activeColor="cyan" />
    </View>
  );
};

export default App;

【讨论】：

它的工作！另一个问题，如果我用相同的代码制作另一个 div 两个 div 在点击中的变化，有一种简短的方法（可能在 React Native 中）可以在不制作各种功能的情况下更改 div 的颜色？
@Guilherme 我在下面添加了一个替代示例。

【解决方案2】：

首先从react中导入usestate；

import React, {useState} from 'react';

    function lastTouches() {


const [active, setActive] = useState(false);
  const Press1 = () => setActive(!active);

  const buttonTextStyle = {
    color: active ? 'green' : 'red'
  };

              return (
                <Box>
                  <Box>
                    <TouchableOpacity onPress={Press1}>
                      <Text style={buttonTextStyle}>
                        Change Color
                      </Text>
                    </TouchableOpacity>
                </Box>
              );
            }
            
            export default lastTouches;

它会起作用的！对于 React Js，使用按钮和调用函数；

【讨论】：