时间戳

首页 > 解决方案 > 导航反应本机

forms - 导航反应本机

问题描述

我在 react-native 中实现导航，创建了一个登录表单。如果注册用户输入相关数据并单击登录，他们应该转到他们的个人资料，但由于执行脚本而出现错误...

Can't find variable: navigation

我该如何解决？

这是我的脚本：

这是文件 App.tsx

import React from "react";
import { StyleSheet, View, StatusBar, ScrollView } from "react-native";
import Image from "./Forms_app/components/image";
import TextInput from "./Forms_app/components/inputs";
import Text from "./Forms_app/components/text";
import TouchableOpacity from "./Forms_app/components/buttons";

export default function App() {
  return (
    <View style={styles.container}>
      <ScrollView>
        <Text />
        <Image />
        <TextInput />
        <TouchableOpacity />

        <StatusBar barStyle="dark-content" />
      </ScrollView>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: 20,
    backgroundColor: "#191919",
    alignItems: "center",
    justifyContent: "center",
  },
});

这是文件按钮：

import React from "react";
import {
  StyleSheet,
  View,
  StatusBar,
  TouchableOpacity,
  Text,
} from "react-native";

export default function App() {
  const LoadProfile = () => {
    navigation.navigate();
  };

  return (
    <View style={styles.main}>
      <TouchableOpacity style={styles.buttons} onPress={LoadProfile}>
        <Text
          style={{
            fontSize: 18,
            color: "white",
            textShadowColor: "white",
            textShadowRadius: 5,
          }}
        >
          Log in
        </Text>
      </TouchableOpacity>

      <Text style={styles.registration}>Registration</Text>
      <Text style={styles.forgotpass}>Forggot password?</Text>
      <StatusBar barStyle="dark-content" />
    </View>
  );
}

const styles = StyleSheet.create({
  main: {
    alignItems: "baseline",
    justifyContent: "center",
  },
  buttons: {
    height: 30,
    width: "60%",
    alignItems: "center",
    justifyContent: "center",
    marginBottom: 75,
    borderRadius: 10,
    marginLeft: 75,
    bottom: 75,
    backgroundColor: "coral",
  },
  registration: {
    fontSize: 18,
    bottom: "85%",
    color: "lightsalmon",
    left: "37%",
    textShadowRadius: 4,
    textShadowColor: "black",
    fontWeight: "bold",
    textDecorationLine: "underline",
  },
  forgotpass: {
    fontSize: 18,
    bottom: "65%",
    color: "darkorange",
    textDecorationLine: "underline",
    left: "30%",
    textShadowRadius: 3,
    textShadowColor: "blanchedalmond",
  },
});

这是文件导航：

import React from "react";
import Profile from "./Profile";

import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";

const Stack = createStackNavigator();

export default function Navigate() {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen
          name="Profile"
          component={Profile}
          options={{ title: "Profile" }}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

这是 porifile 文件：

import React from "react";
import { StyleSheet, View, StatusBar, ScrollView, Text } from "react-native";

export default function App() {
  return (
    <View>
      <Text>This is profile</Text>
    </View>
  );
}

标签： formsreact-nativenavigation

解决方案

尝试这个：

export default function App() {
  const navigation = useNavigation();
  const LoadProfile = () => {
    navigation.navigate();
  };
  return (
    <View style={styles.main}>
      <TouchableOpacity style={styles.buttons} onPress={LoadProfile}>
        <Text
          style={{
            fontSize: 18,
            color: 'white',
            textShadowColor: 'white',
            textShadowRadius: 5,
          }}>
          Log in
        </Text>
      </TouchableOpacity>
      <Text style={styles.registration}>Registration</Text>
      <Text style={styles.forgotpass}>Forggot password?</Text>
      <StatusBar barStyle="dark-content" />
    </View>
  );
}

https://reactnavigation.org/docs/use-navigation/

推荐阅读