亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

為了賬號安全,請及時綁定郵箱和手機立即綁定
已解決430363個問題,去搜搜看,總會有你想問的

按下時更改本機文本的背景顏色

按下時更改本機文本的背景顏色

呼啦一陣風 2023-05-25 16:06:53
我想更改我的文本(標題和正文)背景顏色,當按下文本 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>  );}
查看完整描述

1 回答

?
紅糖糍粑

TA貢獻1815條經驗 獲得超6個贊

您可以簡單地擁有另一個狀態變量或使用任何條件并設置文本值所需的樣式。在這里,我使用了 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>

  );


查看完整回答
反對 回復 2023-05-25
  • 1 回答
  • 0 關注
  • 135 瀏覽
慕課專欄
更多

添加回答

舉報

0/150
提交
取消
微信客服

購課補貼
聯系客服咨詢優惠詳情

幫助反饋 APP下載

慕課網APP
您的移動學習伙伴

公眾號

掃描二維碼
關注慕課網微信公眾號