react-native - 导航器 this.props.navigator.push

Question

我的路由似乎无法在我的 React native 应用程序中工作。

我在 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 } );
}}

今天有人讨论上面的方法here .

我已经建立了一个工作示例项目 here使用您的一些代码，并粘贴下面的所有内容以供您查看。

'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);