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>
        );
      }

}

Snack setup here

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

navigate的第二个参数是一个名为params的对象，而您的video对象应该是该对象的属性，请尝试如下操作：

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

Answer 3

不使用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;
}

无法使用导航和多个StackNavigators传递参数

3 个答案: