React Native:React Navigation - 在每个屏幕中使用相同的标题组件? [英] React Native: React Navigation - use the same header component in every screen?

问题描述

所以，我正在尝试使用 React Navigation 并且我想在我的所有屏幕上使用相同的 Header 组件.

So, I'm trying to use React Navigation and I want to use the same Header component across all my screens.

我使用 expo-cli 来创建项目.

I used the expo-cli to create the project.

在我的 MainTabNavigator.js 文件中，我有一个 HomeStack 和 SettingsStack，它们看起来像这样:

In my MainTabNavigator.js file, I have a HomeStack and SettingsStack, and they look like this:

const config = Platform.select({
  web: { headerMode: "screen" },
  default: {}
});

const HomeStack = createStackNavigator(
  {
    Home: HomeScreen
  },
  config
);

HomeStack.navigationOptions = {
  tabBarIcon: ({ focused }) => (
    <NavButton
      focused={focused}
      name={focused ? "star" : "create"}
      label={focused ? "Save" : "New"}
    />
  )
};

HomeStack.path = "";

在文件的底部，我有我的 tabNavigator

At the bottom of the file, I have my tabNavigator

const tabNavigator = createBottomTabNavigator(
  {
    HomeStack,
    SettingsStack
  },
  {
    tabBarOptions: {
      inactiveTintColor: "#fff",
      labelStyle: {
        fontSize: 14
      },
      showLabel: false,
      style: {
        backgroundColor: "#fff",
        borderTopColor: "#fff",
        height: 70,
        paddingBottom: 10,
        paddingTop: 10
      }
    }
  }
);

tabNavigator.path = "";

export default tabNavigator;

我尝试在 navigatorOptions 和 defaultNavigationOption 上方的 tabBarOptions 中添加

组件在 createBottomTabNavigator 函数中.

I tried adding a <Header /> component in the navigatorOptions and defaultNavigationOption above the tabBarOptions in the createBottomTabNavigator function.

类似:

...
  {
    navigationOptions: {
      header: <Header />
    },
    tabBarOptions: {
      inactiveTintColor: "#fff",
      labelStyle: {
        fontSize: 14
      },
 ...

但这只是给了我一个空白标题...没有使用我的组件.

but this just gives me a blank header... not using my component.

我目前拥有我想要的功能，但我必须进入每个 Screen 文件并添加:

I currently have the functionality I want, but I have to go into each Screen file and add:

HomeScreen.navigationOptions = {
  header: <Header />
};

目前正在使用 "react-navigation": "^3.11.0"

感谢任何帮助！

推荐答案

这就是我实现这一目标的方式.像这样创建一个 CustomHeader 组件:

This is how I'm achieving this. Create a CustomHeader component like this:

const MyHeader = (navigation) => {
return {
    header: props => <MyCustomHeader {...props} />,
    headerStyle: { backgroundColor: '#fff' },
    headerTintColor: '#000',
};
}

然后将其包含在堆栈导航器的 defaultNavigationOptions 中

Then include it in defaultNavigationOptions in your stack navigator

const AppNavigator = createStackNavigator(
{
    Launch: {
        screen: LaunchComponent,
    }
},
{
    initialRouteName: "Launch",
    defaultNavigationOptions: ({ navigation }) => {
        return MyHeader(navigation)
    }
}
)

这篇关于React Native:React Navigation - 在每个屏幕中使用相同的标题组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！