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

Question

我想更改我的文本（标题和正文）背景颜色，当按下文本 press me 时。单击文本“按我”时，我不知道如何连接更改当前状态。我的 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>

  );

}

Answer 1

您可以简单地拥有另一个状态变量或使用任何条件并设置文本值所需的样式。在这里，我使用了 styleToggle 并完成了它。如您所见<Text style={styleToggle? styles.bodyText:styles.bodyTextAft} numberOfLines={5}>决定要使用的样式。您可以在下面查看完整代码。&nbsp;const [styleToggle,setStyleToggle]=useState(true);&nbsp; const onPressTitle = () => {&nbsp; &nbsp; if (titleText == 'First Text' && bodyText == 'Second Text!') {&nbsp; &nbsp; &nbsp; setTitleText('First Text After');&nbsp; &nbsp; &nbsp; setBodyText('Second Text After!');&nbsp; &nbsp; }&nbsp; &nbsp; else if (titleText == 'First Text After' && bodyText == 'Second Text After!') {&nbsp; &nbsp; &nbsp; setTitleText('Second Text');&nbsp; &nbsp; &nbsp; setBodyText('Second Text!');&nbsp; &nbsp; }&nbsp; &nbsp; setStyleToggle(!styleToggle);&nbsp; }&nbsp; return (&nbsp; &nbsp; <View style={styles.container}>&nbsp; &nbsp; &nbsp; &nbsp; <Text style={styles.baseText} onPress={this._onPressButton}>&nbsp; &nbsp; &nbsp; &nbsp; {/* <TouchableHighlight {...touchProps}> */}&nbsp; &nbsp; &nbsp; &nbsp; <Text style={styleToggle? styles.titleText:styles.titleTextAft}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {titleText}{'\n'}{'\n'}</Text>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp;{/* </TouchableHighlight> */}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={styleToggle? styles.bodyText:styles.bodyTextAft} numberOfLines={5}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {bodyText}{'\n'}{'\n'}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </Text>&nbsp; &nbsp; &nbsp; &nbsp; </Text>&nbsp; &nbsp; &nbsp; <View >&nbsp; &nbsp; &nbsp; &nbsp; <TouchableOpacity&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onPress={onPressTitle}>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <Text style={styles.pressMe}>Press Me!</Text>&nbsp; &nbsp; &nbsp; &nbsp; </TouchableOpacity>&nbsp; &nbsp; &nbsp; </View>&nbsp; &nbsp; </View>&nbsp; );