Блог

Главная - Вопросы по программированию - Кнопка React Native 4 -Заголовок для отображения/скрытия компонента

Кнопка React Native 4 -Заголовок для отображения/скрытия компонента

#react-native #header #state

Вопрос:

Я изучаю React Native 4 и борюсь с, вероятно, глупой проблемой. У меня есть экран, на котором я добавляю значок правого заголовка. Когда я нажимаю на этот значок , я хотел бы отобразить/скрыть компонент et на своем экране. Я хотел использовать состояние для «хранения» информации showComp= true/false, но я не могу достичь этого состояния с помощью значка в заголовке. Вот мой код:

 import React , {useState} from   'react';
import {View,Text} from 'react-native';
import { Icon } from "react-native-elements";

const TestScreen = (props) => {
  
 
    const [showComp,setShowComp] = useState(true);

    return(
    <View>
      {showComp? <Text>test</Text> : null }
    </View>
    );
   

}
    
const displayComp = () =>{
  alert("test");
  //function to manipulate showComp here!!!

}


TestScreen.navigationOptions = ({navigation}) => {
  
  return{    
    headerRight: () => (  
      <View >
      <Icon                    
      type="material"
      name="tune"
      onPress={()=>{displayComp()}}    />
      </View>       
    )   
  };
}


export default TestScreen;

Если бы кто-нибудь мог мне помочь, я был бы очень признателен!!

Заранее спасибо

Fabien

Метки: