undefined 不是 object（评估“navigation.navigate”）React Native

Question

我在反应导航中遇到问题，错误消息“未定义不是 object（评估 'navigation.navigate'）”。 尝试通过另一条路线的按钮调用屏幕时发生错误

组件代码：

     export default function Estruturas({ title, display, navigation }) {
      const [estruturas, setEstruturas] = useState([]);
    
      useEffect(() => {
        async function loadEstruturas() {
          const response = await api.get('/produto/api/estrutura');
    
          setEstruturas(response.data);
        }
        loadEstruturas();
      }, []);
    
    
      return (
...
   
          <ProductList>
            {estruturas.map(estrutura => (
              <Item key={estrutura.id} onPress={()=> navigation.navigate('Pedidos')}> 
...

路线代码：

const Tab = createMaterialBottomTabNavigator();
function MyTabs(){
    return(
        <Tab.Navigator
        barStyle={{ backgroundColor: '#694fad' }} 
        initialRouteName='Feed'   
        activeColor='black' 
        >
            <Tab.Screen 
                name="Início"
                component={Dashboard}
                options={{
                    tabBarLabel: 'Início',
                    tabBarIcon: ({ color }) => (
                      <MaterialCommunityIcons name="home"  size={26} />
                    ),
                  }}
            />
            <Tab.Screen 
                name="Pedidos"
                component={Requests}
                options={{
                    tabBarLabel: 'Pedidos',
                    tabBarIcon: ({ color }) => (
                      <MaterialCommunityIcons name="assignment"  size={26} />
                    ),
                  }}
            />
        </Tab.Navigator>)}

export default function Routes() {      
    return (
      <NavigationContainer>
        <MyTabs />
      </NavigationContainer>
    );
  }

我尝试使用 Stack 但它给出了同样的错误

Answer 1

只有导航器堆栈的直接子级才能访问导航道具。 我可以看到您的组件Estruturas不是直接路由，因此它不会直接在 function 道具中获取导航道具。 有两种方法可以完成并修复此问题。

• 使用 react-navigation v4 提供的withNavigation HOC，或者如果您使用的是 v5，则使用useNavigation挂钩。
• 或者，无论您在何处调用此组件，您都需要将导航道具传递给该组件。 这可以如下完成： -

 export default function Dashboard(props) { return ( <View> <Estruturas navigation={props.navigation} /> </View> ); }