React native 如何在reactnative中重定向按钮

您好，我尝试学习react native，并尝试在“设置”中执行重定向按钮：

import Home from./components/Home'
从“./components/Settings”导入设置
从“React”导入*作为React；
从“react native”导入{文本、按钮、导航、视图}；
从'@react-navigation/native'导入{NavigationContainer}；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}；
从'@react-navigation/native'导入{useNavigation}；
const Tab=createBottomTabNavigator（）；
导出默认函数App（）{
返回(
导航。导航（“设置”）}
/>
);
}

使用tab navigator，组件设置功能，但当我尝试使用按钮“ReferenceError:未定义导航”时

我知道这是一个简单的问题，但我已经有了这个错误（我尝试过做“onPress={（）=>component={Home}}），但这也不起作用

---

谢谢！

您确实从“@react navigation/native”导入了{useNavigation}；但您没有使用它。 您可能应该添加：

const navigation = useNavigation();

因此，您可以：

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

---

您确实从“@react navigation/native”导入了{useNavigation}；，但您没有使用它。 您可能应该添加：

const navigation = useNavigation();

因此，您可以：

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

---

您没有将

{navigation}

作为道具传递到

应用程序

试试这个：

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

import Home from./components/Home'
从“./components/Settings”导入设置
从“React”导入*作为React；
从“react native”导入{文本、按钮、导航、视图}；
从'@react-navigation/native'导入{NavigationContainer}；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}；
从'@react-navigation/native'导入{useNavigation}；
const Tab=createBottomTabNavigator（）；
导出默认函数App（{navigation}）{
返回(
导航。导航（“设置”）}
/>
);
}

您没有将

{navigation}

作为道具传递给

应用程序

试试这个：

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

import Home from./components/Home'
从“./components/Settings”导入设置
从“React”导入*作为React；
从“react native”导入{文本、按钮、导航、视图}；
从'@react-navigation/native'导入{NavigationContainer}；
从“@react navigation/bottom tabs”导入{createBottomTabNavigator}；
从'@react-navigation/native'导入{useNavigation}；
const Tab=createBottomTabNavigator（）；
导出默认函数App（{navigation}）{
返回(
导航。导航（“设置”）}
/>
);
}

给我“TypeError:无法读取未定义的属性‘navigate’”：使用上述链接并尝试在Settings.js中添加“导出默认值with Navigation（设置）”；给我“TypeError:无法读取未定义的属性‘navigate’：使用上述链接并尝试添加“导出默认值with Navigation（设置）”；“在Settings.jsi中，我已经尝试过（我将常量导航放在app函数上方），但它给我错误：无效的钩子调用。钩子只能在函数组件主体内部调用（我也不理解）我已经尝试过（我将常量导航放在app函数上方）它给了我一个错误：钩子调用无效。钩子只能在函数组件的主体内部调用（我也不明白）