ОТВЕТ: вы должны сделать это внутри Stack.Screen вложенного навигатора options={{headerShown:false}}
вот так:
<Stack.Screen name="NestedNav" component={Nested_Navigator} options={{headerShown: false}} />
Я начал изучать React-Native, я читал документацию , и он отправил меня в документацию React-Navigation. в соответствии с документами, если у меня есть Nested navigators
, каждый стек навигатора будет иметь свою собственную историю стека,
из документов:
"For example, when you press the back button inside a nested stack navigator,
it'll go back to the previous screen inside the nested stack even if there's
another navigator as the parent."
У меня есть вложенный навигатор стека, но случаются две вещи , первое (когда внутри родительского элемента у меня есть только экран с вложенным навигатором), я не получаю кнопку возврата по умолчанию. во-вторых, если я отображаю экран с вложенными навигаторами стека, я получаю кнопку «Назад», но она возвращается к первому экрану. (где я вызываю вложенные навигаторы из)
мой код: это самый первый экран приложения e
xport default function App() {
return (
<NavigationContainer>
<Stack.Navigator initialRouteName="Home" screenOptions={{ headerStyle: {backgroundColor:'#f4511e'}, headerTintColor:'#fff',headerTitleStyle:{fontWeight:'bold'},headerTitleAlign:'center' , headerBackTitleVisible:false}}>
<Stack.Screen name="Home" component={HomeScreen} options={({navigtion, route}) => ({headerTitle: props=><Screen_Image_Header/> }) } initialParams={{ownTitle: "MY DAMNED TITLE"}}/>
<Stack.Screen name="Details" component={DetailsScreen} options={{ title:"" }} />
<Stack.Screen name="CreatePost" component={CreatePostScreen} options={ ({route}) => ({title: route.params.name}) }/>
<Stack.Screen name="NestedNav" component={Nested_Navigator} /> -- this is the screen with nested nav
</Stack.Navigator>
</NavigationContainer>
)
}
код вложенного экрана навигации:
const Tab = createStackNavigator();
export default function Nested_Navigator() {
return (
<Tab.Navigator initialRouteName="Feed">
<Tab.Screen name="Feed" component={Feed_Nest_Tab} options={{ title: "Hello" }} />
<Tab.Screen name="Messages" component={Messages_Nest_Tab} />
</Tab.Navigator>
)
}
главный экран (отображается первым):
export default function HomeScreen({ route, navigation }) {
return (
<View style={{ flex: 1, alignItems: 'center', justifyContent: "center" }}>
<Text>{JSON.stringify(ownTitle)}</Text>
<Button title="Go To Details" onPress={() => navigation.navigate('Details', { itemId: 86, otherParam: 'just some other param' })} />
<Button title="Create Post" onPress={() => navigation.navigate('CreatePost', { name: "Are Ya winning song?" })} />
<Button title="Update the Screen Title" onPress={() => navigation.setOptions({ title: 'Updated!' })} />
<Button title="Go to Nestned Stack" onPress={()=> navigation.navigate('NestedNav')} />
<Text style={{ margin: 10 }}>Post: {route.params?.post}</Text>
<Text>Count: {count}</Text>
</View>
)
}
два вложенных экрана:
export default function Feed_Nest_Tab({route, navigation}) {
return (
<View>
<Text>Hello From Feed Tab</Text>
<Button title="Go to messages" onPress={()=> (navigation.navigate('Messages')) } />
</View>
)
}
export default function Messages_Nest_Tab({route, navigation}) {
return (
<View>
<Text>Hello from Messages Tab</Text>
</View>
)
}
документы: https://reactnavigation.org/docs/nesting-navigators