我正在使用React导航版本5。
根据屏幕的react navigation docs,options
道具会将配置应用于该特定屏幕。对于常规配置,我们使用screenOptions
,我使用了选项中的header
属性在一个屏幕上显示自定义标头,但在ios堆栈的其他屏幕上也可以看到它。
在Android上正常工作。
这是代码
import * as React from 'react';
import { View, Text } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
function HomeScreen({navigation}) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text onPress={()=>navigation.navigate('Details')}>Home Screen</Text>
</View>
);
}
function DetailsScreen() {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
<Text>Details Screen</Text>
</View>
);
}
const Stack = createStackNavigator();
function App() {
return (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen
name="Home"
component={HomeScreen}
options={{ header:props=><View style={{backgroundColor:'red', height:80}} /> }}
/>
<Stack.Screen
name="Details"
component={DetailsScreen}
options={{ headerShown: false }}
/>
</Stack.Navigator>
</NavigationContainer>
);
}
export default App;
红色标头也在DetailsScreen
上可见。