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

导航器看起来像这样。观察＆＃34;数据＆＃34;被作为道具传递给Component

中的相应renderScene()

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

通过路由器传递属性

1 个答案: