简体   繁体   中英

How can I use defined screens from another file in react native?

I'm new in react native and I have a question about react navigation. I defined some screens in my App.js. like this:

const App = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name='Home' component={Home} options={{ headerShown: false }} />
        <Stack.Screen name='Profile' component={Profile} />
        <Stack.Screen name='News' component={News} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

I think I just can use these screens in App.js. how can I access and use these screens in another screen for example Profile.js. how can I import those? should I define this screens again?

my Profile screen uses react navigation too. My Profile:

const Profile = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name='Profile' component={Profile} />
        <Stack.Screen name='Settings' component={Settings} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

It is well documented here: Navigating to a new screen

Just use navigation.navigate('Profile') from Home screen to navigate to profile and navigation.goBack() to go back to Home screen(previous screen).

note: same applicable to every screen defined inside stack navigator.

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM