React Navigation Header 随屏幕变化
React Navigation Header change with screen
我有一个 StackNavigation,想要一个默认 Header
(组件 Header),并希望 "deep pages" 显示为 React Navigation 生成的默认 header。
在我的索引页 **Index**
中,只想要 Header 组件(第一个 header)...但显示另一个空白 header:
在我的 "deep page" **Teste**
中,只希望标题和后退按钮由 RNav(第二个 header)自动生成...但是第一个 header 出现了。
这是我的导航配置:
const RootNavigator = StackNavigator({
Welcome: {screen: Welcome},
User: {
screen: TabNavigator({
Clientes: {
screen: StackNavigator({
Index: {screen: Clientes},
Teste: {
screen: Teste,
header: undefined
}
}, {
header: null,
navigationOptions: {
tabBarIcon: () => (
<Icon name="list-alt" size={22} color="#ffffff" />
)
}
})
},
Opcoes: { screen: Opcoes }
}, {
tabBarPosition: 'bottom',
tabBarOptions: {
showLabel: false,
activeTintColor: '#fff',
showIcon: true,
inactiveTintColor: '#ccc',
indicatorStyle: {
backgroundColor: '#ccc'
},
style: {
backgroundColor: '#536878'
}
}
})
},
}, {
initialRouteName: 'User',
navigationOptions: {
header: props => <Header {...props} />
}
});
export default RootNavigator;
每个 StackNavigator 都有一个 header,第一个来自 RootNavigator = StackNavigator({
,您看到的底部来自 Clientes: { screen: StackNavigator({
。
首先,Clientes: { screen: StackNavigator({
中的接缝 header: null
没有任何效果。您应该尝试使用 headerMode: 'none'
,这会从 Index
中删除空白 header,但也会从 Teste
中删除带有标题和后退按钮的 header,这不是'解决不了你所有的问题。
所以我会建议不同的导航器结构:
RootNavigator(StackNavigator)
- Welcome
- Index
- Teste
- User(TabNavigator)
- Clientes
- Opcoes
接下来你应该做的是在组件本身内部为 Teste
设置不同的 header(默认设置,带后退按钮),如下所示:
import { Header } from 'react-navigation';
Teste.navigationOptions = ({ navigation, screenProps }) => ({
return {
header: <Header {...screenProps} {...navigation} />
}
});
您甚至可以制作自己的 header 组件并在 Teste.navigationOptions 中使用它。
我有一个 StackNavigation,想要一个默认 Header
(组件 Header),并希望 "deep pages" 显示为 React Navigation 生成的默认 header。
在我的索引页 **Index**
中,只想要 Header 组件(第一个 header)...但显示另一个空白 header:
在我的 "deep page" **Teste**
中,只希望标题和后退按钮由 RNav(第二个 header)自动生成...但是第一个 header 出现了。
这是我的导航配置:
const RootNavigator = StackNavigator({
Welcome: {screen: Welcome},
User: {
screen: TabNavigator({
Clientes: {
screen: StackNavigator({
Index: {screen: Clientes},
Teste: {
screen: Teste,
header: undefined
}
}, {
header: null,
navigationOptions: {
tabBarIcon: () => (
<Icon name="list-alt" size={22} color="#ffffff" />
)
}
})
},
Opcoes: { screen: Opcoes }
}, {
tabBarPosition: 'bottom',
tabBarOptions: {
showLabel: false,
activeTintColor: '#fff',
showIcon: true,
inactiveTintColor: '#ccc',
indicatorStyle: {
backgroundColor: '#ccc'
},
style: {
backgroundColor: '#536878'
}
}
})
},
}, {
initialRouteName: 'User',
navigationOptions: {
header: props => <Header {...props} />
}
});
export default RootNavigator;
每个 StackNavigator 都有一个 header,第一个来自 RootNavigator = StackNavigator({
,您看到的底部来自 Clientes: { screen: StackNavigator({
。
首先,Clientes: { screen: StackNavigator({
中的接缝 header: null
没有任何效果。您应该尝试使用 headerMode: 'none'
,这会从 Index
中删除空白 header,但也会从 Teste
中删除带有标题和后退按钮的 header,这不是'解决不了你所有的问题。
所以我会建议不同的导航器结构:
RootNavigator(StackNavigator)
- Welcome
- Index
- Teste
- User(TabNavigator)
- Clientes
- Opcoes
接下来你应该做的是在组件本身内部为 Teste
设置不同的 header(默认设置,带后退按钮),如下所示:
import { Header } from 'react-navigation';
Teste.navigationOptions = ({ navigation, screenProps }) => ({
return {
header: <Header {...screenProps} {...navigation} />
}
});
您甚至可以制作自己的 header 组件并在 Teste.navigationOptions 中使用它。