代码之家 › 专栏 › 技术社区 › gigapico00

React Native-导航未定义

mobile-application react-native javascript

gigapico00 · 技术社区 · 2 年前

我在应用程序中声明了“ProfileScreen”。js

function App({ navigation }) {
return (
    <>
    <StatusBar hidden />
    <NavigationContainer>
    <Stack.Navigator initialRouteName="Home">
        
        <Stack.Screen 
        ...            
        component={HomeScreen} 
        ...
        />

        <Stack.Screen 
        ...
        component={FeedScreen}
        ...
        />

        <Stack.Screen 
        ... 
        component={ProfileScreen} 
        ...
        />

    </Stack.Navigator>
    </NavigationContainer>
    </>
);
}

我进入FeedScreen内的ProfileScreen。js

export const ProfileScreen = () => {
return(
  <Text style={{ textAlign: "left", color: "black", fontSize: 24, fontFamily: 'Montserrat_100Thin_Italic' }}>
    Hello
  </Text>
);
}

在FeedScreen内部。js我想导航到ProfileScreen:

const Item = ({ item }, { navigation }) => {
return (
  <>
    <TouchableOpacity onPress={() => navigation.navigate("ProfileScreen")}>
      <Text style={{ textAlign: "left", color: "white", fontSize: 24, fontFamily: 'Montserrat_100Thin_Italic' }}>
        <Image
          style={{ alignSelf: "center", borderRadius: 50 }}
          source={{ uri: item.profile_picture, width: 48, height: 48 }}
        />
        {item.username}
      </Text>
    </TouchableOpacity>
  </>
);
};

不幸的是,一切都回来了 Undefined不是对象(正在评估“navigation.navigate”)

2 回复 | 直到 2 年前

Martinez 2 年前

要获得简单的解决方案,请使用挂钩 useNavigation 在项目组件内部,如下所示:

import { useNavigation } from '@react-navigation/native'; 

const Item = ({item}) => {
  const navigation = useNavigation();
  return (
    <TouchableOpacity onPress={() => navigation.navigate('ProfileScreen')}>
      <Text
        style={{
          textAlign: 'left',
          color: 'white',
          fontSize: 24,
          fontFamily: 'Montserrat_100Thin_Italic',
        }}>
        <Image
          style={{alignSelf: 'center', borderRadius: 50}}
          source={{uri: item.profile_picture, width: 48, height: 48}}
        />
        {item.username}
      </Text>
    </TouchableOpacity>
  );
};

Inder 2 年前

您使用的语法错误 navigation 里面的支柱 FeedScreen 应该是这样的

const Item = ({ item , navigation }) => {

推荐文章

Softly · 单选按钮未按预期取值

11 月前

Jason Owens · 我的html/javascript播放按钮无法播放嵌入的youtube视频

11 月前

SlickRed · 我无法使用JS关注HTML元素

11 月前

Mayron Guedes · 如果登录名不在本地存储中,如何重定向页面?

11 月前

assembler · Nextjs没有处理发布请求

11 月前

PavelB · 如何使用Seleniumwebdriver和mocha只运行一个测试文件?

11 月前

BADRUM · 执行两个获取功能后,如何导航回页面?

11 月前

Toniq · javascript为php保存多维数组

11 月前

Natalie Smyth · 隐藏类只在我试图切换的两个部分中的一个部分上工作

11 月前

SkyWalker · 在JavaScript中,合并日期-时间序列的有效算法是什么?

11 月前