Question

我在反应导航中遇到问题，错误消息“未定义不是对象（正在评估'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 不是直接路线，因此它不会直接在功能props内部获得导航prop。有两种方法可以完成并修复此问题。

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

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

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

1 个答案: