如何在本机反应中重定向按钮

Question

您好，我尝试学习 react-native，我尝试做一个在“设置”处重定向的按钮：

import Home from './components/Home'
import Settings from './components/Settings'

import * as React from 'react';

import { Text,Button,Navigation, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useNavigation } from '@react-navigation/native';

const Tab = createBottomTabNavigator();

export default function App() {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        
        <Tab.Screen name="Home" component={Home} />
      </Tab.Navigator>
      <Button

        title="Press me"
        color="#f194ff"
        onPress={() => navigation.navigate("Settings")}
      />
      
    </NavigationContainer>
    
  );
}

使用选项卡导航器，组件设置功能，但是当我尝试使用按钮“ReferenceError：导航未定义”时

我知道这是一个简单的问题，但我已经遇到了这个错误（我试图做“onPress={() => component={Home}} 但这也不起作用

谢谢！

Answer 1

您使用了import { useNavigation } from '@react-navigation/native';，但您没有使用它。 您可能应该添加：

const navigation = useNavigation();

这样你就可以做到：

 onPress={() => navigation.navigate("Settings")}

Answer 2

您没有将{ navigation } 作为道具传递给App 试试这个：

import Home from './components/Home'
import Settings from './components/Settings'

import * as React from 'react';

import { Text,Button,Navigation, View } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs';
import { useNavigation } from '@react-navigation/native';


const Tab = createBottomTabNavigator();



export default function App({ navigation }) {
  return (
    <NavigationContainer>
      <Tab.Navigator>
        
        <Tab.Screen name="Home" component={Home} />
      </Tab.Navigator>
      <Button

        title="Press me"
        color="#f194ff"
        onPress={() => navigation.navigate("Settings")}
      />
      
    </NavigationContainer>
    
  );
}