React native 如何在React Native上创建多个屏幕？ 从“React”导入React； 从“react native”导入{TextInput，样式表，文本，视图}； 从“react native elements”导入{Button}； 从“react native Navigation”导入{Navigation}； 从“/Signup”导入注册； 导出默认函数App（）{ 返回( 初级Facebook 登录 注册 ); } const styles=StyleSheet.create({ 容器：{ 弹性：1， 背景颜色：“#fff”， 对齐项目：“居中”， 为内容辩护：“中心”， }, });

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

多谢各位 我听说我可以使用react导航，所以我在谷歌上搜索了一下，但它也不起作用。

---

请在这里帮助我，

您需要安装堆栈导航器模块来完成此操作。 使用如下代码所示的屏幕创建堆栈导航器。（这里我使用了登录页面和注册页面，请更改到您的页面并导入）

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

堆栈导航器

---

我按照你教我的做了，但主页上有一个文本，当我点击该文本时，它不会将我指向另一个页面though@FerinPatel请将官方教程附在您的答案后，我喜欢您的答案我已经添加了官方文档的链接以及导航到其他屏幕的方式。另外，正如您提到的，单击文本在react native上不起作用，您需要使用TouchableOpacity包装文本，并在其上设置on Press。

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

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;

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

export default App = () => {

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

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

"@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"