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