Реактивная навигация, createMaterialTopTabNavigator. проблема

Question

фотография

Моя проблема в том, что я не знаю, куда поставить "title". У меня TabNavigator, с двумя страницами. Вы можете видеть на изображении, что я действительно хочу сделать.

import React from 'react';
import { Text, View,Button } from 'react-native';
import { createMaterialTopTabNavigator } from 'react-navigation';


class HomeScreen extends React.Component {

    render() {

        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <View >
                    <Button
                        title='Click me'
                        onPress={() => this.props.navigation.navigate('HomeScreen')} />
                </View>
            </View>
        );
    }
}

class SettingsScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
                <Text>Settings!</Text>
            </View>
        );
    }
}

export default createMaterialTopTabNavigator({
    Test1: { screen: HomeScreen },
    Test2: { screen: SettingsScreen },
});

Answer 1

Одно из возможных решений - обернуть MaterialTopTabNavigator внутри StackNavigator и добавить к нему опцию заголовка. Поэтому ваш код должен выглядеть примерно так:

import React from 'react';
import { Text, View,Button } from 'react-native';
import { createMaterialTopTabNavigator, createStackNavigator } from 'react-navigation';


class HomeScreen extends React.Component {
  render() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <View >
            <Button
                title='Click me'
                onPress={() => this.props.navigation.navigate('HomeScreen')} />
          </View>
        </View>
    );
  }
}

class SettingsScreen extends React.Component {
  render() {
    return (
        <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
          <Text>Settings!</Text>
        </View>
    );
  }
}

const App = createMaterialTopTabNavigator({
  Test1: { screen: HomeScreen },
  Test2: { screen: SettingsScreen },
});

export default createStackNavigator({
  app: {
    screen: App,
    navigationOptions: {
      title: 'Screen title',
    },
  },
});