Реагировать навигация: динамически скрывать заголовок - PullRequest
Новая
       16

Реагировать навигация: динамически скрывать заголовок

0 голосов
/ 17 марта 2020

В моем приложении React Native для Android для определенного компонента я хочу скрыть заголовок основного StackNavigator.

Я так много читал об использовании static navigationOptions вот так: 

  static navigationOptions = ({navigation}) => {
    return {
      header: null,
    };
  };

... но я просто не могу понять, как правильно его использовать.

Вот App.ts, где расположен главный StackNavigator: 

import React from 'react';
import {Image, View, StyleSheet, ImageBackground} from 'react-native';
import {createAppContainer} from 'react-navigation';
import {createStackNavigator} from 'react-navigation-stack';

import Test from './src/screens/Test/Test';
import LandingPage from './src/screens/LandingPage/LandingPage';

class RootComponent extends React.Component {
  render() {    
    return (
      <View>            
        <LandingPage />
      </View>
    );
  }
}

const RootStack = createStackNavigator(
  {
    LandingPage: {
      screen: RootComponent,
      navigationOptions: {
        header: null,
      },
    },
    Test: { // The Header of this screen should be hidden as soon as a Button inside Test is pressed
      screen: Test,
      navigationOptions: {
        title: 'Test Title',
      },
    },
  },
  {
    initialRouteName: 'LandingPage',
  },
);

const AppContainer = createAppContainer(RootStack);

export default class App extends React.Component {
  render() {
    return <AppContainer />;
  }
}

Это компонент Test.tsx: 

import React from 'react';
import {Image,View} from 'react-native';

import TestBody from '../../components/organisms/TestBody/TestBody';

type Props = {};

const Test: React.FC<Props> = ({}) => {
  const navigationOptions = { // should I do the configuration here?
    header: null,
  };

function hideHeader() {
 // How to set the Header null here?
}

  return (
    <View>
      <TestBody />
      <Button
       title={'Press me and the header will disappear!'}
       onPress={() => hideHeader()}>
      </Button>
    </View>
  );
};
export default Test;

Подход к установке navigationOptions в компоненте правильно? Потому что, если я это сделаю, это не применяется. Еще один способ, о котором я думал, это использовать Redux. Поэтому, как только будет нажата кнопка в Test, я создам действие, установлю состояние (например, "hideHeader") true и затем получу доступ к состоянию. Но будет ли это хорошим решением? И где бы я получил доступ к государству? Я бы подумал в App.ts, но не уверен, правильно ли это.

Не могли бы вы мне помочь?

Вот обновленный код, предложенный Дмитрием: 

import React, {useState} from 'react';
import {Button, Image, View} from 'react-native';

import TestBody from '../../components/organisms/TestBody/TestBody';
import {withNavigation} from 'react-navigation';

interface Props {
  navigation: any;
}

const Test: React.FC<Props> = ({navigation}) => {
  const [showHeader, setShowHeader] = useState(true);
  navigation.setParams({
    header: showHeader ? undefined : null,
  });

  function hideHeader() {
    setShowHeader(!showHeader);
    navigation.setParams({
      header: showHeader ? undefined : null,
    });
  }

  return (
    <View>
      <TestBody />
      <Button
        title={'Press me and the header will disappear!'}
        onPress={() => hideHeader()}></Button>
    </View>
  );
};
export default withNavigation(Test);

1 Ответ

0 голосов
/ 17 марта 2020

Вам, вероятно, не нужен Redux для этого. Код, который вы нашли, верен: 

static navigationOptions = ({navigation}) => {
  return {
    header: null,
  };
};

Вы можете использовать его как есть в компоненте класса. 

import React from 'react'
import { Button, Image, View, Text } from 'react-native'

export class Test extends React.Component{
  state = {
    showHeader: true,
  }


  hideHeader = (hide: boolean) => {
    this.props.navigation.setParams({
      headerShown: !hide,
    })
  }
  render() {
    return (
      <View>
        <Button
          title={'Press me and the header will disappear!'}
          onPress={() => {
            this.setState({ showHeader: !this.state.showHeader }, ()=>this.hideHeader(this.state.showHeader))
          }}
        />
      </View>
    )
  }
}

Надеюсь, это поможет. Обратите внимание, что в последних версиях header: null устарела. Вы, вероятно, хотите использовать headerShown: true/false вместо

...