Question

我可以导航到屏幕，但参数未定义，状态仅为：

{
key: "id-1574950261181-7",
routeName: "Video Player"
}

导航自：

  render() {
    const {
      id,
      title,
      description,
      video,
      preview,
      push,
      dispatch,
      testLink,
      navigate
    } = this.props;

    return (
      <TouchableHighlight
        style={styles.episode}
        activeOpacity={1}
        underlayColor="#808080"
        onPress={() => {
          navigate("VideoPlayer", { tester: id });
        }}
      >
        <View style={styles.title}>
          <Text style={styles.text}>{title}</Text>
        </View>
      </TouchableHighlight>
    );
  }

我的VideoPlayerScreen（为简洁起见）给了我：

import React from "react";
import {
...
} from "react-native";
...
...
class VideoPlayerScreen extends React.Component {
  constructor(props) {
    super(props);
    this.state = {};
    this.onShare = this.onShare.bind(this);
    this.navigateScreen = this.navigateScreen.bind(this);
    this.bookmarkVideo = this.bookmarkVideo.bind(this);
    this.loadRecapVideo = this.loadRecapVideo.bind(this);
  }
  ....
  render() {
    const {
       videos,
       bookmarkVideo,
       navigate,
       state: {
         params: { id }
       }
     } = this.props;
    console.log(this.props.navigation.state.params);
    let videoProps = videos.find(obj => obj.id == id);

    return (<View />)
  }
}

const mapDispatchToProps = dispatch => ({
  bookmarkVideo: id => dispatch(bookmarkVideo(id))
});

const mapStateToProps = state => {
  return {
    videos: state.tcApp.videos
  };
};

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(VideoPlayerScreen);

Answer 1

如果您使用的是react-native-navigation 4x，则应更改props变量

来自：

const { ... navigate, } = this.props; 到：

const { ... navigation, } = this.props;

并这样称呼它：

onPress={() => { navigation.navigate("VideoPlayer", { tester: id }); }}

官方文档：React Native Navigation Docs

友好。

使用反应导航未定义状态参数

1 个答案: