如何在React Native中处理单独文件中的导航

Question

我是React native的新手我想在与App.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;

这是我的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;