按下时更改本机文本的背景颜色答案

【问题标题】：Changing the background color of the text in react native when it is pressed按下时更改本机文本的背景颜色
【发布时间】：2020-10-18 17:30:27
【问题描述】：

我想更改我的文本（标题和正文）背景颜色，当文本按下我时。单击文本“按我”时，我不知道如何连接更改当前状态。我的 app.js 和 styles.js 相互连接。

这是我目前在 app.js 中的内容

import React, { useState } from 'react';
import { StyleSheet, Text, View, TouchableOpacity, TouchableHighlight } from 'react-native';
import { styles } from './styles.js';
export default function TextInANest() {
  const [titleText, setTitleText] = useState('First Text');
  const [bodyText, setBodyText] = useState('Second Text!');

  onPressTitle = () => {
    if (titleText == 'First Text' && bodyText == 'Second Text!') {

      setTitleText('First Text After');
      setBodyText('Second Text After!');
    }
    else if (titleText == 'First Text After' && bodyText == 'Second Text After!') {
      setTitleText('Second Text');
      setBodyText('Second Text!');
    }
  }

  return (
    <View style={styles.container}>
        <Text style={styles.baseText} onPress={this._onPressButton}>
        {/* <TouchableHighlight {...touchProps}> */}
        <Text style={styles.titleText}>
            {titleText}{'\n'}{'\n'}</Text>
         {/* </TouchableHighlight> */}
          <Text style={styles.bodyText} numberOfLines={5}>
            {bodyText}{'\n'}{'\n'}
          </Text>
        </Text>
      <View >
        <TouchableOpacity
          onPress={onPressTitle}>
          <Text style={styles.pressMe}>Press Me!</Text>
        </TouchableOpacity>
      </View>
    </View>
  );
}

这是我目前在 styles.js 中的内容：

import { StyleSheet } from 'react-native'
export const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'lavender',
    alignItems: 'center',
    justifyContent: 'center',
  },
  baseText: {
    fontFamily: 'Cochin',
  },
  titleText: {
    fontSize: 24,
    fontWeight: 'bold',
    backgroundColor:'#ddffd0',
    textAlign: 'center',
  },
  bodyText: {
    fontSize: 16,
    fontWeight: 'bold',
    backgroundColor:'#adf4e0',
    textAlign: 'center',
  },
  titleTextAft: {
    fontSize: 16,
    fontWeight: 'bold',
    backgroundColor:'#adf4e0',
    textAlign: 'center',
  },
  bodyTextAft: {
    fontSize: 24,
    fontWeight: 'bold',
    backgroundColor:'#ddffd0',
    textAlign: 'center',
  },
  pressMe:{
    fontSize: 23,
    fontWeight: 'bold',
    color: '#ff0000',
    fontFamily: 'Cochin',
    textAlign: 'center',
  }
}
);

谢谢！

【问题讨论】：

标签： javascript css reactjs react-native

【解决方案1】：

您可以简单地使用另一个状态变量或使用任何条件并为 Text 值设置所需的样式。在这里，我使用了 styleToggle 并做到了。

如你所见

<Text style={styleToggle? styles.bodyText:styles.bodyTextAft} numberOfLines={5}>

决定要使用的样式。

你可以在下面看到完整的代码。

 const [styleToggle,setStyleToggle]=useState(true);

  const onPressTitle = () => {
    if (titleText == 'First Text' && bodyText == 'Second Text!') {

      setTitleText('First Text After');
      setBodyText('Second Text After!');
    }
    else if (titleText == 'First Text After' && bodyText == 'Second Text After!') {
      setTitleText('Second Text');
      setBodyText('Second Text!');
    }

    setStyleToggle(!styleToggle);
  }

  return (
    <View style={styles.container}>
        <Text style={styles.baseText} onPress={this._onPressButton}>
        {/* <TouchableHighlight {...touchProps}> */}
        <Text style={styleToggle? styles.titleText:styles.titleTextAft}>
            {titleText}{'\n'}{'\n'}</Text>
         {/* </TouchableHighlight> */}
          <Text style={styleToggle? styles.bodyText:styles.bodyTextAft} numberOfLines={5}>
            {bodyText}{'\n'}{'\n'}
          </Text>
        </Text>
      <View >
        <TouchableOpacity
          onPress={onPressTitle}>
          <Text style={styles.pressMe}>Press Me!</Text>
        </TouchableOpacity>
      </View>
    </View>
  );

【讨论】：