[英]React Native: React Navigation - use the same header component in every screen?
所以,我正在尝试使用 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"
任何帮助表示赞赏!
这就是我实现这一目标的方式。 像这样创建一个 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)
}
}
)
将您的 StackNavigator 设置为您的 BottomTabNavigator 的父项,这样做将使您拥有所有底部选项卡的单个标题。 如果您使用这种方法,并且出于某种原因需要在您的标题上有一个backButton
,您必须自己手动更改它。
const bottomTabNavigator = createBottomTabNavigator(bottomRoutesConfig, bottomNavigatorConfigs)
createStackNavigator:({ tabNavigator : bottomTabNavigator },{ defaultNavigationOptions :{ header : <Header/> }})
这样做您可以为所有屏幕使用一个全局标题,但如上所述,要根据屏幕更改标题上的某些内容,您必须自己更改它,使标题知道用户当前所在的位置。
我想为 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>
在每个屏幕中将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
来加载您的自定义组件
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.