как обработать навигацию в файле Seprate в React Native

Question

Я новичок в React native. Я хочу управлять навигацией в компоненте, отдельном от приложения. js Компонент.

Я не мог понять, как работать с отдельным файлом компонента

const Stack = createStackNavigator();

function App() {
  return (
    <NavigationContainer style={{ backgroundColor: '#FFFFFF' }}>
      <Stack.Navigator>

        <Stack.Screen name=" " component={FirstPage}   
          options={{
            headerLeft: () => (
              <Button
                onPress={() => alert('This is a button!')}
                title="Info"
                color="#fff"
              />
            ),
          }}
        />
        <Stack.Screen name="Login" component={LoginView}
          options={{
            headerStyle: {
              backgroundColor: '#88aa31',
            },

            headerTintColor: '#fff',
            headerLeft: () => (
              <Button
                onPress={() => alert('This is a button!')}
                title="Info"
                color="#fff"
              />
            ),
          }}
        />
        <Stack.Screen name="Signup" component={SignUpView}
          options={{
            headerStyle: {
              backgroundColor: '#88aa31',
            },
            headerTintColor: '#fff',
          }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

export default App;

Это мое приложение. js файл. Как мне управлять навигацией в отдельном компоненте в React Native?

Answer 1

Создайте файл навигации, импортируйте все остальные компоненты, как показано ниже в коде.

import { createAppContainer, createStackNavigator } from "react-navigation";
import LoginView from './App/component/Views/Login'
import SignUpView from './App/component/Views/Signup';

const SwitchNavigator = createStackNavigator(
    {
        LoginView: { screen: LoginView },
        SignUpView: { screen: SignUpView }
    },
    {
        initialRouteName: 'LoginView',
    }
);

const App = createAppContainer(SwitchNavigator)

export default App;