React Native:React导航-在每个屏幕中使用相同的标题组件吗?

时间:2019-07-02 02:54:26

标签: react-native react-native-navigation

因此,我正在尝试使用React Navigation,并且希望在所有屏幕上使用相同的Header组件。

我使用expo-cli创建了项目。

在我的MainTabNavigator.js文件中,我有一个HomeStackSettingsStack,它们看起来像这样:

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上方的defaultNavigationOptiontabBarOptions中添加一个createBottomTabNavigator组件。

与此类似:

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

但这只是给我一个空白的标题...不使用我的组件。

我目前拥有所需的功能,但是我必须进入每个Screen文件并添加:

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

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

感谢您的帮助!

4 个答案:

答案 0 :(得分:0)

在每个屏幕中将header设置为null并在每个屏幕上加载组件

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

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

因此,header的默认react-navigation将是null,您可以将自定义组件作为标头加载

OR

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

  /* render function, etc */
}

使用headerTitle而非title来加载您的自定义组件

答案 1 :(得分:0)

将StackNavigator设置为BottomTabNavigator的父级,这样做将使您拥有所有bottomTab的单个标头。 如果您使用这种方法,并且由于某种原因需要在标头上使用backButton,则必须自己手动进行更改。

const bottomTabNavigator = createBottomTabNavigator(bottomRoutesConfig, bottomNavigatorConfigs)

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

这样做,您可以在所有屏幕上使用一个全局标题,但是如上所述,要根据屏幕更改标题上的某些内容,您必须自己更改它,使标题知道用户当前所在的位置。

答案 2 :(得分:0)

这就是我实现这一目标的方式。 创建如下的CustomHeader组件:

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

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

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

答案 3 :(得分:0)

我想为 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>