Блог

Приветствую всех, я пишу собственное приложение React и наткнулся на кое-что интересное.

Это упрощенная версия моего кода:

 //import statements
...

const Profile = (props) => {
    return(
       <Text>Hey {props.name}!</Text>
       <TouchableOpacity onPress={() => navigation.goBack();}>Go back</TouchableOpacity>
);}

export function ScreenOne({ navigation }) {
    <Profile name="HUFF">
}
export function ScreenTwo({ navigation }) {
    //blah blah blah
}

export default function App(){
    //rest of the code
    ...
}
 

Итак, в основном я пытаюсь использовать react-навигацию для навигации между экранами моего приложения. Но кнопка внутри моего Profile компонента не работает.

Учтите, что я перехожу от ScreenTwo к ScreenOne

заранее спасибо.

Для этого вам, возможно, придется указать navigation с помощью реквизитов в Profile теге JSX, чтобы он мог получить доступ к родительским navigation элементам внутри компонента. Например.:

 //import statements
...

const Profile = (props) => {
    return(
       <Text>Hey {props.name}!</Text>
       <TouchableOpacity onPress={() => props.navigation.goBack()}>Go back</TouchableOpacity>
    );
}

function ScreenOne({ navigation }) {
   <Profile name="HUFF" navigation={navigation}>
}

function ScreenTwo({ navigation }) {
    //blah blah blah
}

export default function App(){
    //rest of the code
    ...
}
 

Навигация по реакции имеет useNavigation крюк

 import { useNavigation } from '@react-navigation/native'
// if you are not using react-navigation 5 or 6
// then there is package https://github.com/react-navigation/hooks

const Profile = (props) => {
    const navigation = useNavigation();
    return(
       <Text>Hey {props.name}!</Text>
       <TouchableOpacity onPress={() => navigation.goBack()}>Go back</TouchableOpacity>
    );
}