导航器未将参数传递给场景

Question

所以，我有一个简单的按钮（TouchableHighlight）调用以下函数：

showMovie() {

        this.props.navigator.push({
            name: 'MovieScreen',
            index: 1,
            movie: "terminator"
        });
    }

它按预期工作，推送在不同文件中定义的 MovieScreen 场景。

在 MovieScreen 构造函数中，我有：

constructor(props) {
        super(props);
        console.log(this.props.movie);
}

我得到的只是“未定义”。

我尝试过：console.log(this.props.passProps.movi​​e); => 未定义。

我尝试将“电影”参数放入 passProps 对象 => 未定义。

我似乎无法将参数传递给场景。如果我打印 this.props，我在任何地方都找不到“电影”变量，但 this.props 就在那里，它包含导航器对象和所有内容。

从网络上的例子来看，我正在做成千上万人所做的事情，不同之处在于我的行不通。

我做错了什么？

根据要求提供更多详细信息

这就是我的应用程序的组成方式：

• index.android.js
• HomepageScreen.js
• MovieScreen.js

index.android.js

class MovieApp extends Component {
    render() {
        return (
            <Navigator
                initialRoute={{ name: 'HomepageScreen', title: 'My Initial Scene', index: 0 }}
                renderScene={ this.renderScene }
            />
        );
    }

    renderScene(route, navigator) {
        if (route.name == 'HomepageScreen') {
            return <HomepageScreen navigator={navigator} />
        }

        if (route.name == 'MovieScreen') {
            return <MovieScreen navigator={navigator} />
        }
    }
}

HomepageScreen.js

export default class HomepageScreen extends Component {
    constructor(props) {
        super(props);
        var navigator = this.props.navigator;
      
    render() {
      return(                           
        <TouchableNativeFeedback onPress={this.showMovie.bind(this)}>
                                    <View style={Style.movieButton}>
                                    <Text style={Style.textStyle1}>Asd</Text>
                                    </View>
                                    </TouchableNativeFeedback>
        );
    }

    showMovie() {

        this.props.navigator.push({
            name: 'MovieScreen',
            index: 1,
            movie: "terminator"
        });
    }

}

MovieScreen.js

export default class MovieScreen extends Component {
    constructor(props) {
        super(props);

        console.log(this.props.movie);
    }
  
  .....

Answer 1

试试这个：

renderScene(route, navigator) {
    if (route.name == 'HomepageScreen') {
        return <HomepageScreen navigator={navigator} {...route.passProps} />
    }

    if (route.name == 'MovieScreen') {
        return <MovieScreen navigator={navigator} {...route.passProps} />
    }
}

并像这样传递道具：

this.props.navigator.push({
    name: 'MovieScreen',
    index: 1,
    passProps: {
      movie: "terminator"
    }
});