Почему мой вложенный стек переходит на первый экран, несмотря на то, что в документации написано React Navigation, React Native - ОТВЕТ ВНУТРИ - PullRequest
1 голос
/ 12 июля 2020

ОТВЕТ: вы должны сделать это внутри 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

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...