(React Native) Undefined не является объектом (оценка 'navigation.navigate')

Из App.js я объявляю «FollowingScreen», который состоит из модуля, который экспортирует «Following».

export const FollowingScreen = ({route, navigation}) => {
return (
    <ScrollView style = {styles.scrollView}>
      <View style = {{ flex: 1, justifyContent: 'center', alignItems: 'center', backgroundColor: "#262423" }}>
       <Following />
      </View>
    </ScrollView>
  );
}

«Following» экспортируется файлом «following.js». Из «following.js» я хочу перейти к ProfileScreen:

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

class Following extends Component {

...
...


renderItem = ({item}, navigation) => (
<ListItem bottomDivider>
    <ListItem.Content style = {{width: '100%', display: 'flex', flexDirection: 'row', justifyContent: 'space-between', alignItems: 'center'}}>
    <ListItem.Title>{item.title}</ListItem.Title>
    <TouchableOpacity 
        onPress = {() => navigation.navigate("ProfileScreen", {userInfo: {uri: item.probability, username: item.country_id, id_user: item.id_user}})} 
        style = {{ flexDirection: 'row'}}
    >
        <Image
        style = {{ borderRadius: 50 }}
        source = {{ uri: item.probability, width: 48, height: 48 }}
        />
    </TouchableOpacity>
    <TouchableOpacity 
        onPress = {() => navigation.navigate("ProfileScreen", {userInfo: {uri: item.probability, username: item.country_id, id_user: item.id_user}})} 
        style = {{ flexDirection: 'row'}}
    >
        <ListItem.Subtitle style = {{color: '#000'}}>
        <Text style = {{fontFamily: 'Montserrat_600SemiBold' }}>{item.name} {item.surname}</Text>
        {"\n"}
        <Text style = {{fontFamily: 'Montserrat_600SemiBold' }}>@{item.country_id}</Text>
        {"\n"}
        {"\n"}
        <Text style = {{fontFamily: 'Montserrat_600SemiBold' }}>{item.followers}</Text>
        {"\n"}
        <Text style = {{fontFamily: 'Montserrat_600SemiBold' }}>{item.total}</Text> Total
        </ListItem.Subtitle>
    </TouchableOpacity>
    <Button
        buttonStyle = {{backgroundColor: "#a6aba7", padding: 9, textAlign: "right", borderRadius: 10, display: item.isFollowing= = "Same user" ? "none" : "flex"}}
        title = {item.isFollowing}
        onPress = {() => {
        if (item.isFollowing= = "Follow"){
            this.follow(item.id_user);
        }
        else if (item.isFollowing= = "Unfollow"){
            this.unfollow(item.id_user);
        }
        else if (item.isFollowing= = "Same user"){
            //alert("Same user");
        }
        }}
    />
    </ListItem.Content>
</ListItem>
);
}

к сожалению, я получаю «undefined не является объектом (оценка« navigation.navigate »)»

🤔 А знаете ли вы, что...
JavaScript - это скриптовый язык программирования, разработанный Netscape Communications Corporation.


98
2

Ответы:

Вам нужно объявить «навигацию» перед ее вызовом:

const navigation = useNavigation();

прямо перед

renderItem = (...)

Решено

Вы не передаете navigation в качестве реквизита компоненту Following, поэтому измените свой компонент FollowingScreen аналогичным образом:

export const FollowingScreen = ({route, navigation}) => {
  {/** Rest Of Code **/}

   <Following navigation = {navigation}/>

  {/** Rest of Code **/}
 }

Затем в классе Following используйте this.props.navigation.navigate(....).