Как перейти от одного экрана стека к другому экрану стека? - PullRequest
Новая
       20

Как перейти от одного экрана стека к другому экрану стека?

0 голосов
/ 14 апреля 2020 
//Navigator2.js

function Navigator2() {
  return (
    <Navigator2Stack.Navigator
      headerMode="screen"
      screenOptions={{
        headerTintColor: "white",
        headerStyle: { backgroundColor: "#1c5e74" },
      }}
    >
      <Navigator2Stack.Screen
        name="Screen2"
        component={Screen2.js}
        options={{
          title: "Screen2",
        }}
      />
    </Navigator2.Navigator>
  );
}
export default Navigator2;


//Screen1.js(which is registered in Navigator1 stack)

export const Screen1 = ({navigation}) => {
  return (
    <View style={styles.screen}>
      <Text>Screen1!</Text>
      <Button
        title="go to Screen2"
        onPress={() => navigation.navigate('Navigator2')}
      ></Button>
    </View>
  );
};

the folder structure goes like this-->
Navigation Folder
      |-->Navigator1.js
      |-->Navigator2.js
screens
   |-->Screen1.js

Screen1. js, который регистрируется в стеке в Navigator1. Файл и экран в Navigator2. Я хочу перейти от Screen1 к Screen 2, как мне это сделать?

я использую реагирующую навигацию v5.

1 Ответ

0 голосов
/ 21 апреля 2020

После небольшого исследования, это должно сделать работу: 

<Button
    title="go to Screen2"
    onPress={() => navigation.navigate('Navigator2', { screen: 'Screen2' })}
/>

РЕДАКТИРОВАТЬ:

Вот полный пример: 

import React from 'react'
import { Button, View, StyleSheet } from 'react-native'
import { NavigationContainer } from '@react-navigation/native'
import { createStackNavigator } from '@react-navigation/stack'

const Screen1 = ({ navigation }) => (
    <View style={styles.component}>
        <Button title="Go to Screen 2" onPress={() => navigation.navigate('Navigator2', { screen: 'Screen2' })} />
    </View>
)

const Screen2 = ({ navigation }) => (
    <View style={styles.component}>
        <Button title="Go back" onPress={() => navigation.goBack()} />
    </View>
)

const Navigator1 = createStackNavigator()

const Nav1 = () => (
    <Navigator1.Navigator>
        <Navigator1.Screen name="Screen1" component={Screen1} />
    </Navigator1.Navigator>
)

const Navigator2 = createStackNavigator()

const Nav2 = () => (
    <Navigator2.Navigator>
        <Navigator2.Screen name="Screen2" component={Screen2} />
    </Navigator2.Navigator>
)

const Main = createStackNavigator()

export default props => (
    <NavigationContainer>
        <Main.Navigator headerMode="none">
            <Main.Screen name="Navigator1" component={Nav1} />
            <Main.Screen name="Navigator2" component={Nav2} />
        </Main.Navigator>
    </NavigationContainer>
)

const styles = StyleSheet.create({
    component: {
        flex: 1,
        justifyContent: 'center',
        alignItems: 'center',
    }
})
...