通过路由器传递属性

Question

这是一个本机应用程序

我试图像这样通过路由器将属性传递给组件：

我在单独的组件中有一个带有onPress的按钮：

  _onPress() {
    this.props.navigator.push(Router.getDealList(this.state.categoryName, this.state.categoryId));
  }

路由器定义为：

const Router = {
  getDealList(categoryName, categoryId) {
    return {
      renderScene() {
        let DealList = require('./components/DealList').default;
        debugger;
        return <DealList categoryId={categoryId} />;
      },
      getTitle() {
        return categoryName;
      },
    };
  },
};

但是，当我尝试访问DealList组件中的属性时，它似乎未定义。 我正在尝试这样做：

  _onFetch(page = 1, callback) {
    const categoryId = this.props.categoryId;
...
}

我试图调试它，并且似乎有变量直到我尝试调用_onFetch

Answer 1

我在我的React本机应用程序中使用了另一种方法。 请耐心等待，这可能会给您一个线索，也可以完全采用相同的方法。

在main.js我有这个结构，可以顺利处理所有事情。

顶级视图：

var Splash = require('./views/splash');
var Signin = require('./views/signin');
var Signup = require('./views/signup');
var Home = require('./views/home');

路线：

var ROUTES = {
    splash: Splash,
    signin: Signin,
    signup: Signup,
    home: Home,
};

导航器看起来像这样。 观察“数据”作为renderScene()传递给renderScene()相应Component

render: function(){

    return(
        //Render first view through initialRoute
        <Navigator 
            style={styles.container} 
            initialRoute={{ name: 'home', index: 0 }} 
            renderScene={ this.renderScene } 
            configureScene={ () => { return Navigator.SceneConfigs.PushFromRight; }}
        >
        </Navigator>            
    )
},
renderScene: function(route, navigator){

    //ROUTES['signin'] => SignIn
    var Component = ROUTES[route.name]; 
    return (
        <Component 
            route={route} 
            navigator={navigator} 
            data={route.data}
        />
    );      
}

当我想在我的应用程序中推送新视图时，只需执行以下操作：

onPressNewBooking: function(){
    this.props.navigator.push({ name: 'newbooking', data: this.state.rawData })
}