导航器this.props.navigator.push

Question

我似乎无法在我的本机应用程序中使我的路由工作.

我在index.android.js中进行了以下设置:

class MainClass extends Component {

render() {
    return NavigationService.navigationSetup();
}

并在NavigationService中

var React = require('react-native');
var Login = require('./login/Login');
var ProjectList = require('./project/list/ProjectList');
var ProjectView = require('./project/view/ProjectView');

var {
    Navigator
} = React;

var renderScene = function (route, navigator) {

var routeId = route.id;

if (routeId === 'Login') {
    return (<Login {...route.passProps} navigator={navigator} />);
}

if (routeId === 'ProjectList') {
    return (<ProjectList {...route.passProps} navigator={navigator} />);
}

if (routeId === 'ProjectView') {
    return (<ProjectView {...route.passProps} navigator={navigator} projectId={route.passProps.projectId} />);
}
};

var navigationSetup = function () {
return (
    <Navigator
        initialRoute={{id: 'Login', component:Login}}
        renderScene={renderScene.bind(this)}
    />
);
};

module.exports = {
    navigationSetup: navigationSetup
};

并在ProjectListView中:

   this.props.navigator.push({
        id: 'ProjectView',
        passProps: {
            projectId: projectId
        }
    });

从Login到ProjectList的路由工作.但是,当我尝试通过列表单击导航到ProjectView我得到:

undefined is not an object (evaluating this.props.navigator.push). 

我看过导游并尝试了不同的东西,但似乎导航仪不在那里......

如果有人可以帮助我,那会很棒.

还有一个问题:当我在Chrome中启用调试(使用Genymotion)时,路由/导航对我不起作用,这是正常的吗？!尝试过不同的项目......

干杯尼克拉斯

Answer 1

看起来您需要在renderScene方法中定义passProps.您可以通过两种方式之一完成此操作.一,通过使用扩展运算符将passProps传递到您的组件中:

if (routeId === 'Login') {
       return (<Login {...route.passProps} navigator={navigator}/>);  
}

或者,您可以手动创建组件并使用React.createElement传递它(这可能会更好地扩展):

renderScene={(route, navigator) => {
  return React.createElement(route.component, { ...this.props, ...route.passProps, navigator, route } );
}}

今天在这里讨论了上述方法.

我已经在这里设置了一些工作示例项目,其中包含一些代码,并粘贴下面的所有内容供您查看.

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Navigator,
  TouchableHighlight
} = React;

var SampleApp = React.createClass({

  _renderScene(route, navigator) {
     var routeId = route.id;

     if (routeId === 'Home') {
         return (<Home navigator={navigator}/>);
     }

    if (routeId === 'Login') {
           return (<Login {...route.passProps} navigator={navigator}/>);  
    }

     if (routeId === 'About') {
         return (<About {...route.passProps} navigator={navigator}/>);
     }
  },

  render: function() {
    return (
      <Navigator
            initialRoute={{ id:'Home', name: 'Home', component: Home }}
        renderScene={ (route, navigator) => this._renderScene(route, navigator) }
        />
    );
  }
});

var About = React.createClass({
    render() {
    return (
        <View style={ styles.container }>
        <TouchableHighlight onPress={ () => this.props.goBack() }>
            <Text>Go Back</Text>
        </TouchableHighlight>
        <Text>Hello from About</Text>
        <Text>{ this.props.message }</Text>
      </View>
    )
  }
})

var Login = React.createClass({
    render() {
    return (
        <View style={ styles.container }>
        <TouchableHighlight onPress={ () => this.props.goBack() }>
            <Text>Go Back</Text>
        </TouchableHighlight>
        <Text>Hello from Login</Text>
        <Text>{ this.props.message }</Text>
      </View>
    )
  }
})

var Home = React.createClass({

  navigate(id, message) {
    this.props.navigator.push({
        id: id,
      passProps: {
        message: message,
        goBack: this.goBack,
      }
    })
  },

    goBack() {
        this.props.navigator.pop()
    },

    render() {

    return (
        <View style={ styles.container }>
        <Text>Hello from Home</Text>
        <TouchableHighlight onPress={ () => this.navigate('About', 'This is the about page!') } style={ styles.button }>
            <Text>GO TO ABOUT</Text>
        </TouchableHighlight>
        <TouchableHighlight onPress={ () => this.navigate('Login', 'This is the login page!') } style={ styles.button }>
            <Text>GO TO Login</Text>
        </TouchableHighlight>
      </View>
    )
  }
})

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:60
  },
  button: {
    height: 50,
    backgroundColor: '#ededed',
    marginTop: 10,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);