Невозможно передать параметры, используя навигацию и несколько StackNavigators

Question

  render() {
    const { icon, title, description, preview, video } = this.props;

    return (
  ....
            <Text
              onPress={() => {
                this.props.navigation("VideoPlayer", video);
              }}
              style={styles.text}
            >
              {title}
            </Text>

Используя отдельные stackNavigators в DrawerNavigator, в моем компоненте я использую getParam, но он пуст, как я могу пропустить реквизиты?

  render() {
    const { navigation } = this.props;
    const videoId = navigation.getParam("video", ''); // empty

    return (

AppNavigator:

const config = {
    initialRouteName: "Home",
    contentOptions: {
        activeTintColor: "#e91e63",
        itemStyle: {
            flexDirection: "row-reverse"
        }
    },
    drawerWidth: 300,
    drawerPosition: "right"
};

const withHeader = (
    screen: Function,
    routeName: string,
    Header
): StackNavigator =>
    createStackNavigator(
        {
            [routeName]: {
                screen,
                navigationOptions: ({ navigation, routeName, props }) => ({
                    header: props => <Header {...props} />
                })
            }
        },
        {
            transparentCard: true
        }
    );

const routes = {
    Home: {
        screen: withHeader(HomeScreen, "Home", BasicHeader)
    },
    Links: {
        screen: withHeader(LinksScreen, "Links", DrawerHeader)
    },
    Settings: {
        screen: withHeader(SettingsScreen, "Settings", DrawerHeader)
    },
    VideoEpisodes: {
        screen: withHeader(VideoEpisodesScreen, "Video Episodes", DrawerHeader)
    },
    VideoPlayer: {
        screen: withHeader(VideoPlayerScreen, "Video Player", DrawerHeader)
    },
    TestYourself: {
        screen: withHeader(TestYourselfScreen, "Test Yourself", DrawerHeader)
    },
    MyResults: {
        screen: withHeader(MyResultsScreen, "My Results", DrawerHeader)
    },
    BookmarkedVideos: {
        screen: withHeader(
            BookmarkedVideosScreen,
            "Bookmarked Videos",
            DrawerHeader
        )
    },
    Search: {
        screen: withHeader(SearchScreen, "Search", DrawerHeader)
    },
    About: {
        screen: withHeader(AboutScreen, "About", DrawerHeader)
    }
};

const AppNavigator = createDrawerNavigator(routes, config);

export default createAppContainer(AppNavigator);

VideoPlayer:

    export default class VideoPlayerScreen extends React.Component {
      constructor(props) {
        super(props);
        this.state = {
          video: this.props.navigation.state.params.video
        };
      }
      render() {
        console.log(this.state.video);

        return (
          <View style={styles.container}>
            <VideoPlayer {...this.props} /> 
          </View>
        );
      }

}

Настройка закуски здесь

Answer 1

Если video имеет правильное значение,

 render() {
    const { icon, title, description, preview, video } = this.props;

    return (
  ....
            <Text
              onPress={() => {
                this.props.navigation.navigate("VideoPlayer", {video: video });
              }}
              style={styles.text}
            >
              {title}
            </Text>

Экран VideoPlayer:

constructor(props) {
    super(props);
    this.state = {
      video: this.props.navigation.state.params.video,
    };
  }

Answer 2

Решил это, не используя props:

https://reactnavigation.org/docs/en/navigating-without-navigation-prop.html

Используя мою собственную функцию в моем компоненте:

function getParams() {
    const {
        nav: { index, routes }
    } = _navigator.state;

    const params = routes[index].params;
    return params;
}

Answer 3

Второй параметр navigate - это объект с именем params, а ваш video объект должен быть свойством этого объекта, попробуйте так:

this.props.c("VideoPlayer", { video });