Проблема рендеринга динамически в реагировать родной

Question

У меня есть эта функция в моем собственном классе реакции:

Содержание нажатия кнопки «Перед» показывает сразу, когда компонент монтируется, но когда я нажимаю текст приветствия, выполняется функция «onPressingTheButton» и консоль показывает зарегистрированный текст и флаг теперь 2. проблема в том, что «Содержимое после нажатия кнопки» не отображается даже после изменения флага.

PastEvents = () => {
    var hello;
    var flag = 1

function onPressingTheButton() {
  console.log("logged text")
  flag = 2
  console.log(flag) //2
}
if (flag == 1) {
  hello = <View>Content Before button Press</View> //displayed
}

if (flag == 2) {
   hello = <View>After Button Press</View> //never displayed
}
  return (
    <View style={styles.container}>
      {hello}
      <TouchableOpacity>
        <Text onPress={() => onPressingTheButton()}>helloo</Text>
      </TouchableOpacity>
    </View>
  )
 }
}

как примечание, вызывается функция прошедшего события по карте сцены из первого рендера:

 render() {
      return (
        <TabView
          navigationState={{ index: this.state.index, routes: this.state.routes }}
          renderScene={SceneMap({
            PastEvents: this.PastEvents,
            UpcomingEvents: this.UpcomingEvents,
          })}
        />
      );
    }

как я могу отобразить «Содержимое после нажатия кнопки»? Спасибо за вашу помощь.

Answer 1

Для этого вам нужно использовать useState следующим образом:

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

PastEvents = () => {
    const [hello , setText] = useState('Before Button Press');
    var flag = 1

    function onPressingTheButton() {
  console.log("logged text")
  flag = 2
  console.log(flag) //2
  if(flag == 2){
    setText('After Button Press');
  }

}

  return (
    <View style={{marginTop:"30%"}}>
      <Text>{hello}</Text>
        <Text onPress={() => onPressingTheButton()}>helloo</Text>
    </View>
  )
 }
 export default PastEvents;

После нажатия кнопки

Надеюсь, это поможет!

Answer 2

Здравствуйте, вы можете попробовать вставить условные операторы в функцию onPressingTheButton.

function onPressingTheButton() {
  console.log("logged text")
  flag = 2
  console.log(flag) //2

  if (flag == 1) {
    hello = <Text>Before button Press</Text> //displayed
  }

  if (flag == 2) {
     hello = <Text>After Button Press</Text> //never displayed
  }

}