Блог

Я хочу иметь возможность использовать навигацию на другом экране, отличном от первого, но я получаю сообщение об ошибке, что this.props не существует.

У меня есть App.js настройка файла следующим образом:

 import { createStackNavigator } from '@react-navigation/stack';
import { NavigationContainer } from '@react-navigation/native';

import Screen2 from './screens/Screen2';  
import Screen3 from './screens/Screen3';
import HomeScreen from './screens/HomeScreen';

const Stack = createStackNavigator();

function HomeScreen({ navigation }) {
  return (
    <View>
        <Button
        title="Go to Screen2"
        onPress={() => {
        navigation.navigate('Screen2');
        }}
      />
      <Button
        title="Go to Screen3"
        onPress={() => {
        navigation.navigate('Screen3');
        }}
      />
    </View>
  );


const App: () => React$Node = () => {
  return (
    <NavigationContainer>
      <Stack.Navigator>
        <Stack.Screen name="Home" component={HomeScreen} />
        <Stack.Screen name="Screen2" component={Screen2} />
        <Stack.Screen name="Screen3" component={Screen3} />
      </Stack.Navigator>
    </NavigationContainer>
  );
};
  

Кнопки в app.js работает, но если я перейду к Screen2 и нажму кнопку, которая намеревается перейти к другому (Screen3 в примере ниже), реквизит не существует.

Пример Screen2.js будет выглядеть примерно так:

 const Screen2: () => React$Node = () => {

  return (
    <>   
      <View style={{ flex: 1 }}>
        <Button
        title="Go to Screen3"
        onPress={goToScreen3}}
      />
      </View>     
    </>
  );

function goToScreen3() {
  if(condition){
this.props.navigate.navigate('Screen3');
}}
  

Как мне передать реквизит, чтобы я мог использовать навигацию на моем втором экране?

Для функционального компонента иногда сложно передавать навигацию и через реквизиты. Так что просто используйте withNavigation.

вы должны импортировать его и обернуть им функцию.

 import { withNavigation } from 'react-navigation';

const Screen2 = props => {

  const goToScreen3 = () => {
    if(condition){
    props.navigate.navigate('Screen3');
  }}

  return (
    <>   
      <View style={{ flex: 1 }}>
        <Button
        title="Go to Screen3"
        onPress={goToScreen3()}
      />
      </View>     
    </>
  );



export default withNavigation(Screen2)

  

В функциональном компоненте нет этой привязки, поэтому сначала вам нужно получить реквизиты из функции

проверьте, что

 const Screen2 = (props) => {

  return (
    <>   
      <View style={{ flex: 1 }}>
        <Button
        title="Go to Screen3"
        onPress={goToScreen3}}
      />
      </View>     
    </>
  );

function goToScreen3() {
  if(condition){
   props.navigate.navigate('Screen3');
  }
}
}