React Native: React Navigation - use the same header component in every screen?

问题

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

I used the expo-cli to create the project.

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 = "";

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;

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

Similar to this:

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

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

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

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

Currently using "react-navigation": "^3.11.0"

Any help is appreciated!

回答1:

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

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

Then include it in defaultNavigationOptions in your stack navigator

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

回答2:

set header to null in every screen and load your component on each screens

class HomeScreen extends Component {
    static navigationOptions = {
        header: null,
    };

    render(){
    return(
      <View style={{flex:1}}>
          <Header />
      </View>
     )
   }
}

so, the default header of react-navigation will be null and you can load your custom component as header

class HomeScreen extends React.Component {
  static navigationOptions = {
    // headerTitle instead of title
    headerTitle: <Header />,
  };

  /* render function, etc */
}

use headerTitle instead of title to load your custom component

回答3:

Set your StackNavigator as parent of your BottomTabNavigator, doing it will let you have a single header for all the bottomTabs. If you use this approach, and need for some reason to have a backButton on your header you have to change it manually yourself.

const bottomTabNavigator = createBottomTabNavigator(bottomRoutesConfig, bottomNavigatorConfigs)

createStackNavigator:({ tabNavigator : bottomTabNavigator },{ defaultNavigationOptions :{ header : <Header/> }})

Doing this you can use one global header for all the screens, but as said, to change something on the header based off the screen you have to change it yourself, making the header know in what location the user currently is.

来源：https://stackoverflow.com/questions/56844711/react-native-react-navigation-use-the-same-header-component-in-every-screen

标签

react-native

react-native-navigation