React Native：React Navigation - 在每個屏幕中使用相同的標題組件？

Question

所以，我正在嘗試使用 React Navigation 並且我想在我的所有屏幕上使用相同的 Header 組件。

我使用expo-cli創建項目。

在我的MainTabNavigator.js文件中，我有一個HomeStack和SettingsStack ，它們看起來像這樣：

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

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;

我嘗試添加一個<Header />在組件navigatorOptions和defaultNavigationOption上述tabBarOptions在createBottomTabNavigator功能。

與此類似：

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

但這只是給了我一個空白標題......沒有使用我的組件。

我目前擁有我想要的功能，但我必須進入每個Screen文件並添加：

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

當前使用"react-navigation": "^3.11.0"

任何幫助表示贊賞！

Answer 1

這就是我實現這一目標的方式。 像這樣創建一個 CustomHeader 組件：

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

然后將其包含在堆棧導航器的defaultNavigationOptions中

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

Answer 2

將您的 StackNavigator 設置為您的 BottomTabNavigator 的父項，這樣做將使您擁有所有底部選項卡的單個標題。 如果您使用這種方法，並且出於某種原因需要在您的標題上有一個backButton ，您必須自己手動更改它。

const bottomTabNavigator = createBottomTabNavigator(bottomRoutesConfig, bottomNavigatorConfigs)

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

這樣做您可以為所有屏幕使用一個全局標題，但如上所述，要根據屏幕更改標題上的某些內容，您必須自己更改它，使標題知道用戶當前所在的位置。

Answer 3

我想為 DrawerNavigator 實現類似的解決方案。 唯一的方法是創建 HOC 組件。

import React, {Fragment} from 'react';

const NavHeader = props => {
 // ... NavHeader code goes here 
};

export const withHeader = Component => {
  return props => {
    return (
      <Fragment>
        <NavHeader {...props} />
        <Component {...props} />
      </Fragment>
    );
  };
};

然后在你的抽屜里你做：

<Drawer.Navigator>
    <Drawer.Screen
      name={ROUTES.DASHBOARD}
      component={withHeader(DashboardContainer)} // <--- Wrap it around component here.
    />
</Drawer.Navigator>

Answer 4

在每個屏幕中將header設置為null在每個屏幕上加載您的組件

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

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

因此， react-navigation的默認header將為null ，您可以將自定義組件加載為標頭

或者

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

  /* render function, etc */
}

使用headerTitle而不是title來加載您的自定義組件