Как создать несколько экранов на React Native?

Question

import React from 'react';
import {TextInput, StyleSheet, Text, View } from 'react-native';
import {Button} from 'react-native-elements';
import { Navigation } from 'react-native-navigation';
import Signup from "./Signup";

export default function App() {
  return (
    <View style={styles.container}>
      <Text style={{marginTop: 0}}>Junior Facebook</Text> 
       <TextInput placeholder="Email" style={{width: 80, height: 30}}/> 
       <TextInput placeholder="Password" style={{width:80, height: 30}}/> 
       <Button title="Log In">Log In</Button>
      <Button title="Sign Up">Sign Up</Button>
    </View> 
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

Я пытаюсь создать новый экран под названием «Регистрация». Как я могу?

Спасибо, я слышал, что могу использовать реагирующую навигацию, поэтому я погуглил, но она тоже не работает. Пожалуйста, помогите мне здесь,

Answer 1

Для этого вам нужно установить модуль Stack Navigator. Создайте Stack Navigator с экраном, как показано ниже. (здесь я использовал страницу входа и страницу регистрации, перейдите на свои страницы, а также импортируйте).

импортируйте этот навигатор стека в файл приложения. js и оберните его контейнером навигации; Ссылка на официальные документы

Навигатор стека

import React from "react";
import { createStackNavigator } from "@react-navigation/stack";
import SignIn from "../screens/auth/SignIn";
import SignUp from "../screens/auth/SignUp";

const AuthStack = () => {
  const AuthStack = createStackNavigator();

  return (
    <AuthStack.Navigator>
      <AuthStack.Screen
        name="Sign In"
        component={SignIn}
        options={{
          headerTitle: "",
          headerTransparent: true
        }}
      />
      <AuthStack.Screen
        name="Sign Up"
        component={SignUp}
        options={{
          headerTitle: "",
          headerTransparent: true
        }}
      />
    </AuthStack.Navigator>
  );
};

export default AuthStack;

Приложение. js

import other stuff;
import { NavigationContainer } from "@react-navigation/native";
import AuthStackScreen from "./routes/AuthStack";

export default App = () => {

return (
    <SafeAreaView>
      <NavigationContainer>
         <AuthStackScreen />
      </NavigationContainer>
    </SafeAreaView>
  );

Вход. js

const SignIn = ({navigation}) => {
    return (
       <button onClick={navigation.navigate("Sign Up")}>Click to Navigate</button>
    );
}

Пакет. json

"@react-native-community/masked-view": "0.1.5",
"@react-navigation/native": "^5.0.5",
"@react-navigation/stack": "^5.0.5",
"react-native-safe-area-context": "0.6.0",
"react-native-screens": "2.0.0-alpha.12",
"react-native-web": "^0.11.7",
"react-native-webview": "7.4.3"