单击react native中的按钮时导航

uoifb46i  于 2022-12-19  发布在  React
关注(0)|答案(2)|浏览(153)

我可以成功地实现堆栈和标签导航在我的项目。

import React from "react";
import { StackNavigator } from "react-navigation";
import { TabNavFooter } from "./TabNavFooter";
import { SIGNIN_KEY, SIGNUP_KEY } from "../config/routeKeys";
import {
  SignupScreen,
  SigninScreen,
  MainFeedScreen,
  ProfilePageScreen,
  CommentScreen
} from "../screens";

export const Routes = StackNavigator({
  signin: { screen: SigninScreen },
  comments: { screen: CommentScreen },
  mainfeed: { screen: TabNavFooter },
  signup: { screen: SignupScreen },
  profilePage: { screen: ProfilePageScreen }
});

现在我想在点击评论按钮时导航。我的路线在router/index.js文件中。当我在另一个组件上时,我如何使用它来导航?我尝试了这个方法,但它不起作用。

export default class Post extends Component {
  constructor(props) {
    super(props);
  }

  commentPressedHandler = () => {
    this.props.navigation('comments');
  };
xzv2uavs

xzv2uavs1#

应该像这样添加navigate
因此,请尝试更改代码,如下所示:

commentPressedHandler = () => {
  this.props.navigation.navigate('comments');
};

而不是:

commentPressedHandler = () => {
  this.props.navigation('comments');
};
uplii1fm

uplii1fm2#

以下是使用react原生导航文档中的@react-navigation/native@react-navigation/native-stack的解决方案。https://reactnative.dev/docs/navigation
构建React-Native路由控制器

import * as React from 'react';
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import Login from "./Login";
import Home from "./Home";

const Stack = createNativeStackNavigator();

const NavigationStack = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator screenOptions={{headerShown: false}}>
        <Stack.Screen
          name="Login"
          component={Login}
        />
        <Stack.Screen name="Home" component={CreateAccount} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default NavigationStack;

将导航组件注入到视图中,例如:

const Login = ({ navigation }) => {

为您的按钮实现一个导航到不同视图的函数。

Login = async event => {
    console.log("Login")
    // Do Login Stuff

    // Navigate to Home View by using navigation component
    navigation.navigate("Home");
  }

相关问题