如何在React Native上创建多个屏幕？

Posted 2021-04-29

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',
  },
});

我正在尝试制作一个名为“注册”的新屏幕。我该怎么办？

谢谢我听说我可以使用反应导航，所以我用Google搜索了它，但是它也不起作用。请在这里帮助我，

答案

您需要安装Stack Navigator模块才能执行此操作。使用类似以下代码的屏幕创建Stack导航器。 （在这里，我使用了登录页面和注册页面，请更改到您的页面并导入）。

将此堆栈导航器导入app.js文件，并用导航容器包装；Link to official docs

堆栈导航器

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;

App.js

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

export default App = () => {

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

SignIn.js

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

Package.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"