Заголовок заголовка не отображается

Question

Я использую stackNavigator с несколькими экранами в моем приложении.когда я использую заголовок в объекте navigationOption, он не отображает заголовок в заголовке.Я искал какой-то ответ, но самый близкий, который я мог получить, был этот, который не совсем относится к моему.проблема также не решается при использовании createStacknavigator. Заголовок StackNavigator не показан в простейшем примере

// Маршрутизатор

import { StackNavigator } from 'react-navigation';

export const ScreenSwitcher = StackNavigator({

    SignIn:{
        screen: SignIn,
    },
    Home: {
        screen: Home,
        navigationOption: {
            title: 'HOME TITLE',
        },
    },
    Card: {
        screen: Card,
        navigationOption: {
            title: `CARD TITLE`,
        },
    },
},
    {
        mode: 'card',// modal, card
        headerMode: 'float', // float,screen, none
    }
);

// Компонент карты

class Home extends React.Component{

    constructor(props) {
        super(props);
        this.state = {
            url: 'http://localhost:3000',
            passedInfo: [],
        }
        // Request to the server to get members data
        fetch(this.state.url)
            .then(res => res.json())
            .then(data => {this.setState({passedInfo : data.members })})
            .catch(err => alert(err))
    }

    //  Render each member to the data received
    renderMembers = members =>  members.map((members, index) => <Card info={members} key = {index}/>);

    render = () => { return (
        <View style={styles.main}>

            <ScrollView contentContainerStyle={styles.scroll}>
                <SearchFilter />
                <Header />
                {this.renderMembers(this.state.passedInfo)}
            </ScrollView>

        </View>
    )} 
}

Answer 1

Вы можете просто добавить навигационные опции в файле компонента, как, например, в файле компонента экрана входа в систему:

class signIn extends React.Component {
  static navigationOptions = {
    title: 'Sign In',
  };

  /* render function, etc */
}

Answer 2

Попробуйте navigationOptions вместо navigationOption.

Answer 3

import {StackNavigator} из'act-navigation ';

export const ScreenSwitcher = StackNavigator ({

SignIn:{
    screen: SignIn,
},
Home: {
    screen: Home,
    navigationOptions: {
        title: 'HOME TITLE',
    },
},
Card: {
    screen: Card,
    navigationOptions: {
        title: `CARD TITLE`,
    },
},

}, {mode:' card ', // modal, cardheaderMode: 'float', // float, screen, none});

Answer 4

В каждом компоненте, который вы хотите заголовок, добавьте этот фрагмент кода:

static navigationOptions = {
    title: 'YOUR TITLE HERE',
  };