Навигатор 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 
     } 
    }); 

Маршрутизация от Логин к ProjectList работает. Но когда я пытаюсь с помощью списка щелчком перейдите в ProjectView я получаю:

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

Я посмотрел на гидов и пробовал разные вещи, но мне кажется, что навигатор не там ...

быть бы здорово, если кто-то может мне помочь.

Еще один вопрос: маршрутизация/навигация не работает от меня, когда я включаю отладку в Chrome (используя Genymotion), это нормально ?! Пробовал разные проекты ...

Приветствия Никлас

Answer 1

Похоже, что вам нужно определить passProps в методе renderScene. Вы можете сделать это одним из двух способов. Во-первых, путем передачи 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);