Как передать реквизит с экрана на компонент с помощью стекового навигатора

Question

Вот мой App.js .Он состоит из 2 экранов, на одном из которых есть значок компонента под названием AddIcon

const Stack = createStackNavigator(
  {
    Home: {
      screen: HomeScreen,
      navigationOptions: () => ({
        title: `Home`,
        headerTitleStyle: {
          color: '#56607b',
          fontSize: 18,
          fontWeight: '500',
        },
        headerRight: <AddIcon />
      })
    },
    Add: {
      screen: AddScreen,
      navigationOptions: () => ({
        title: `Add`,
        headerTitleStyle: {
          color: '#56607b',
          fontSize: 18,
          fontWeight: '500'
        }
      })
    },
  },
);

Вот AddIcon.js

const AddIcon = (props) => {
    return (
        <Icon
            name="ios-add-circle"
            onPress={() => this.props.navigation.navigate('Add')}
        />
    );
}

Я пытаюсь сделать этотакой, что при нажатии значка он должен перейти ко второму экрану в стеке (AddScreen.js) .Теперь я получаю сообщение об ошибке: «Не удается прочитать свойство« навигация »из неопределенного».Я понял, что это потому, что AddScreen.js - это тот, который содержит навигационные реквизиты, а не AddIcon.js .Вопрос в том, как сделать так, чтобы на иконке были и реквизиты?

Answer 1

Вы можете создать NavigationService отдельно

import { NavigationActions } from 'react-navigation';

const navigator;

function setTopLevelNavigator(navigatorRef) {
  navigator = navigatorRef;
}

function navigate(routeName, params) {
  navigator.dispatch(
    NavigationActions.navigate({
      routeName,
      params,
    })
  );
}


export default {
  navigate,
  setTopLevelNavigator,
};

Затем в вашем App.js добавить опорную ссылку в Parent StackNavigator:

<RootNavigator
        ref={navigatorRef => {
          NavigationService.setTopLevelNavigator(navigatorRef);
        }}
/>

и код ниже, который вы должны обновить:

import NavigationService from 'path-to-NavigationService.js';

<Icon
 name="ios-add-circle"
 onPress={() => NavigationService.navigate('Add')}
 />

Вы можете сослаться на официальный документ здесь

Надеюсь, это поможет вам.