Скрыть заголовок в навигаторе стека

Я пытаюсь переключить экран, используя как стек, так и навигатор вкладок.

const MainNavigation = StackNavigator({
      otp: { screen: OTPlogin },
      otpverify: { screen: OTPverification},
      userVerified: {
        screen: TabNavigator({
          List: { screen: List },
          Settings: { screen: Settings }
        }),
      },
    });

В этом случае сначала запускается stacknavigator, а затем tabnavigator. и я хочу скрыть заголовки навигатора стека. WIt не работает должным образом, когда я использую navoptions как::

navigationOptions: { header: { visible: false } }

Я пытаюсь использовать этот код для первых двух компонентов, которые используются в stacknavigator. если я использую эту строку, то получаю некоторую ошибку, например:

введите описание изображения здесь

ОТВЕТЫ

Ответ 1

Я использую это, чтобы скрыть панель стека (обратите внимание, что это значение второго параметра):

{
    headerMode: 'none',
    navigationOptions: {
        headerVisible: false,
    }
}

Когда вы используете этот метод, он будет скрыт на всех экранах.

В вашем случае это будет выглядеть так:

const MainNavigation = StackNavigator({
  otp: { screen: OTPlogin },
  otpverify: { screen: OTPverification },
  userVerified: {
    screen: TabNavigator({
    List: { screen: List },
    Settings: { screen: Settings }
   }),
 }
},
{
  headerMode: 'none',
  navigationOptions: {
    headerVisible: false,
  }
 }
);

Ответ 2

Просто используйте приведенный ниже код на странице, которую вы хотите скрыть заголовок

export default class Login extends Component {
    static navigationOptions = {
        header: null
    }
}

обратитесь к Stack Navigator

Ответ 3

Просто добавьте это в свой фрагмент кода класса/компонента и заголовок будет скрыт

 static navigationOptions = { header: null }

Ответ 4

Если вы хотите скрыть на определенном экране, чем это сделать:

// create a component
export default class Login extends Component<{}> {
  static navigationOptions = { header: null };
}

Ответ 5

Если ваш экран является компонентом класса

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

введите это на целевом экране в качестве первого метода (функции).

Ответ 6

Если кто-то ищет способ переключения заголовка, поэтому в компонентеDidMount напишите что-нибудь вроде:

  this.props.navigation.setParams({
      hideHeader: true,
  });

Когда

static navigationOptions = ({ navigation }) => {
    const {params = {}} = navigation.state;

    if (params.hideHeader) {
      return {
        header: null,
      }
    }

    return {
        headerLeft: <Text>Hi</Text>,
        headerRight: <Text>Hi</Text>,
        headerTitle: <Text>Hi</Text>
    };
};

И где-нибудь, когда закончится задание окончания:

this.props.navigation.setParams({
  hideHeader: false,
});

Ответ 7

использование

static navigationOptions = { header: null }

в классе/компоненте

class Login extends Component {

    static navigationOptions = {
        header: null
    }
}

Ответ 8

Я использую header: null вместо header: { visible: true } Я использую реагирующий род Cli. это пример:

static navigationOptions = {
   header : null   
};

Ответ 9

На вашем целевом экране вы должны это кодировать!

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

Ответ 10

Это сработало для меня:

const Routes = createStackNavigator({
Intro: {
    screen: Intro,
    navigationOptions: {
        header: null,
    }
}
},
    {
        initialRouteName: 'Intro',
    }
);

Ответ 11

const CallStack = createStackNavigator({
  Calls: Calls,
  CallsScreen:CallsScreen,
}, {headerMode: 'none'});

CallStack.navigationOptions = {
  tabBarLabel: 'Calls',
  tabBarIcon: ({ focused }) => (
    <TabBarIcon
      focused={focused}
      name={Platform.OS === 'ios' ? 'ios-options' : 'md-options'}
    />
  ),

   header: null,

        headerVisible: false,

};

Ответ 12

Все ответы показывают, как это сделать с компонентами класса, но для функциональных компонентов вы делаете:

const MyComponent = () => {
    return (
        <SafeAreaView>
            <Text>MyComponent</Text>
        </SafeAreaView>
    )
}

MyComponent.navigationOptions = ({ /*navigation*/ }) => {
    return {
        header: null
    }
}

Если вы удалите заголовок, ваш компонент может оказаться в местах, где вы его не видите (когда у телефона нет квадратного экрана), поэтому важно использовать его при удалении заголовка.

Ответ 13

У меня та же проблема, но я сделал свою работу с заголовками в отдельных классах с помощью navigationOptions и я использую createBottomTabNavigator чей заголовок видим, а заголовок классов не виден. Я пробовал все, как headerMode: none, header: null и так далее, но не смог скрыть заголовок bottomTabNavigator.