Реагируйте с собственным названием навигации

Question

Видимо простая проблема: заголовок заголовка в реакции Navigation

Файл навигатора с моими нижними вкладками

const BottomTabNavigator = createMaterialBottomTabNavigator(
  {
    ToFind: {
      screen: TopBarNavigator,
      navigationOptions: {
        title: "Discover",
        tabBarIcon: (tabInfo) => {
          return (
            <Ionicons
              name="md-search"
              size={25}
              color={tabInfo.tintColor} //prende lo stesso colore di tintcolor giù
            />
          );
        },
        tabBarColor: "#27ae60",
        activeColor: "white",
      },
    },

....

const Navigator = createStackNavigator({
  BottomTabNavigator,
  Detail: DetailScreen, // not visible but I need the navigation
  Item: ItemDisplay,  // not visible but I need the navigation
});

Теперь я пытаюсь установить имя на странице (внизу)

MapScreen.navigationOptions = (navData) => {
  return {
    headerTitle: "Map",
  };
};

Для этого у меня есть стиль вкладок «Вниз», который я хочу, и навигация, но Я НЕ МОГУ изменить заголовок заголовка ( название навигации) но я всегда вижу BottomTabNavigator Выглядит действительно трюк или я где-то ошибаюсь? Есть идеи? Спасибо

Answer 1

Попробуйте эти шаги. Надеюсь исправить вашу проблему.

1. Создание навигатора нижней вкладки:

const BottomTabNavigator =  createMaterialBottomTabNavigator(
  {
    PageOne: {
      screen: PageOneComponent,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => <Feather name="airplay" size={26} color={tintColor} />,
        tabBarLabel: null,
        barStyle: { backgroundColor: 'white', elevation: 0, }
      },
    },
    PageTwo: {
      screen: PageTwoComponent,
      navigationOptions: {
        tabBarIcon: ({ tintColor }) => <Feather name="search" size={25} color={tintColor}/>,
        tabBarLabel: null,
        barStyle: { backgroundColor: 'white', elevation: 0, }
      }
    },
    MapViewLink: {
      screen: MapView,
      navigationOptions: {
        tabBarIcon: <Feather name="map-pin" size={25} color={'green'} />,
        tabBarOnPress: ({ navigation }) => {
          navigation.navigate('MapView');
        },
        tabBarLabel: null
      }
    },
  },
  {
    initialRouteName: 'PageOne',
    activeColor: 'orange',
    inactiveColor: 'grey',
    labeled: false,
    barStyle: { backgroundColor: 'white', elevation: 0, borderTopWidth: 1, borderTopColor: '#efefef' },
  }
);

Создайте свой StackNavigator и экспортируйте навигатор

const StackNavigator = createStackNavigator({

  // bottom tab navigator
  BottomTabNavigator: {
    screen: BottomTabNavigator,
    navigationOptions: {
      header: null
    }
  },

  // MapView Page 
  MapView: {
     screen: MapView,
     navigationOptions: ({ navigation }) => ({
        title: 'Hello World'
     })
  },
}, {
defaultNavigationOptions: ({navigation}) => ({
    headerTitleAlign: 'center',
    cardStyle: { backgroundColor: '#FFFFFF' },
    headerTitleStyle: {
      // the default styles you want to apply to header title
    },
});

export default  createAppContainer(StackNavigator);

В конце поместите навигатор в основной файл проекта. например, App.js

Answer 2

createMaterialBottomTabNavigator не имеет панели заголовка по умолчанию, но createStackNavigator имеет.

Вы можете сделать что-то подобное.

import React from "React";
import { createAppContainer, createStackNavigator } from "react-navigation";
import { createMaterialBottomTabNavigator } from "react-navigation-material-bottom-tabs";

class HomeScreen extends React.Component {
    render() {
        return (
            <View style={{ flex: 1, alignItems: "center", justifyContent: "center" }}>
                <Text>Home Screen</Text>
            </View>
        );
    }
}

const Tab1 = createStackNavigator({
    S1: {
        screen: ToFind
    }
});

const Tab2 = createStackNavigator({
    S2: {
        screen: ToFind
    }
});

export default createAppContainer(
    createBottomTabNavigator({
        Tab1,
        Tab2
    }, {
        //CUSTOM CONFIG
        initialRouteName: 'Tab1',
        navigationOptions: ({ navigation }) => ({
            tabBarIcon: ({ tintColor }) => {
                const { routeName } = navigation.state;
                let iconName;
                if (routeName === 'Tab1') {
                    iconName = 'icon1';
                } else if (routeName === 'Tab2') {
                    iconName = 'icon2';
                }
                return <Icon name={iconName} size={24} color={tintColor} />;
                <Ionicons
                    name={iconName}
                    size={25}
                    color={tabInfo.tintColor} //prende lo stesso colore di tintcolor giù
                />
            },
        }),
        tabBarOptions: {
            activeTintColor: 'white',
            inactiveTintColor: 'black',
            showLabel: false,
            style: {
                backgroundColor: '#27ae60',
                borderTopWidth: 0,
                borderTopColor: '#27ae60',
            },
        },
    });
);