通过 Navigator React Native 传递 Pros

Question

出于某种奇怪的原因，我的应用程序没有通过导航器将文章道具传递到详细信息页面，那些变量“条目”确实包含正确的信息（并且不为空）。这是我控制导航器路线的 main.js：

//register on both android and ios index.js files
var React = require('react-native');
var Parse = require('parse/react-native');
var SplashScreen = require('@remobile/react-native-splashscreen');
var {
    View, 
    StyleSheet, 
    Text, 
    Navigator,
    StatusBarIOS,
} = React;

//authentication components 
var Signin = require('./components/authentication/signin');
var Launch = require('./components/authentication/launch');
var Signup = require('./components/authentication/signup');
var MainView = require('./components/experience/main-view');
var Onboarding = require('./components/authentication/onboarding');
var Introduction = require('./components/authentication/introduction');
var ArticleDetails = require('./components/experience/exp_base_components/article-details.js');

//we have router flux enabled and react-native-navbar but we
//need time to change a few things around to enable more customized 
//component transitions 
var ROUTES ={
    //relates to imported component to display
    //initial route is am object with the name of the route within this variable
    launch: Launch,
    signin: Signin, 
    signup: Signup,
    introduction: Introduction,
    onboarding: Onboarding,  
    mainview: MainView, 
    articledetails: ArticleDetails, 
}

module.exports = React.createClass({
    componentWillMount: function() {
        //executed when component shows on screen
        //tells app to initialize parse and facebook js sdk

    }, 
    componentDidMount: function() {
        SplashScreen.hide();
    }, 
    renderScene: function(route, navigator) {
        //when navigator is initially shown it has to render initial route 
        //render a component and return it, whatever we return is placed on stack
        //add navigator property into this component for all app access
        var Component = ROUTES[route.name]; //ROUTE['signin'] => Signin
        return <Component route={route} navigator={navigator} />;
    }, 
    transition: function(route) {
        return ROUTES[route.name].transition;
    },
    render: function() {
        return (
            <Navigator 
                style={styles.container}
                initialRoute={{name: 'launch'}}
                renderScene={this.renderScene}
                configureScene={ () => { return Navigator.SceneConfigs.FloatFromRight; }} />
        );
    }
});

var styles = StyleSheet.create({
    container: {
        flex: 1,
    }
});

这里是包含文章的主页（按下时应该路由到articlesDetails自定义组件页面）：

onArticleDetailsPress: function(entry) {
    //forward to sytled web view of article details given link
    console.log("onArticleDetailsPress"); 
    console.log(entry);
    //pass props to details page
    this.props.navigator.push({
        name: 'articledetails', 
        passProps: {
            entry: entry, 
        }
    });
},

Answer 1

问题是您实际上从未在您的renderScene 中使用passProps。试试这个：

renderScene: function(route, navigator) {
  var Component = ROUTES[route.name];
  return (<Component route={route} navigator={navigator} {...route.passProps} />);
}