Question

一个很简单的问题：反应导航中的标题标题

带有我的底部标签的导航器文件

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

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',
            },
        },
    });
);

Answer 2

尝试这些步骤。希望解决您的问题。

创建底部标签导航器：

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

反应本机导航标题

2 个答案: