React-Native Navigator: Невозможно прочитать свойство «push» undefined

Question

Итак, я играю с React Native, после успеха с моим первым навигатором я делаю другой навигатор для перехода на другую страницу.

Вот моя структура файла:

Проект
- андроид/
- резервное копирование/
- ИОС/
- node_modules/
- SRC/
- buy.js
- chat.js
- main.js
- nargo.ios.js
- styles.js
- index.android.js/
- index.ios.js/
- intro.js/
- main.js/
- package.json/


Вот мой -index.ios.js:

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
} from 'react-native'; 
import AppIntro from 'react-native-app-intro'; 
import Main from './main'; 


class Project extends Component { 

    render() { 
     return (
     <Main /> 
    ); 
    } 
} 

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

Вот мой -main.js (Этот код успеха маршрут intro.js в качестве initialRoute):

import React, { Component } from 'react'; 
import { 
    Navigator, 
    View 
} from 'react-native'; 

import mainApp from './src/main'; 
import intro from './intro'; 
import buy from './src/buy'; 

const routes = { 
    intro, 
    mainApp, 
    buy 
} 

module.exports = React.createClass({ 
    render(){ 
    return (
     <Navigator 
     initialRoute={{name: 'intro'}} 
     renderScene={this.renderScene} 
     /> 
    ) 
    }, 

    renderScene(route, navigator){ 
    let Component = routes[route.name]; 

    return(
     <Component 
     navigator={navigator} 
     /> 
    ) 
    } 
}); 

Вот мой -intro.js (в этом коде, я в очередной раз удалось маршруты на другую страницу (--main.js), когда Done кнопка нажата):

import React, { Component } from 'react'; 
import { 
    View, 
    Text, 
    TextInput, 
    TouchableOpacity, 
    StyleSheet, 
    Image 
} from 'react-native'; 
import AppIntro from 'react-native-app-intro'; 
import styles from './styles'; 

const styless = StyleSheet.create({ 
    slide: { 
    flex: 1, 
    justifyContent: 'center', 
    alignItems: 'center', 
    backgroundColor: '#9DD6EB', 
    padding: 15, 
    }, 
    text: { 
    color: '#fff', 
    fontSize: 30, 
    fontWeight: 'bold', 
    }, 
    Desc1: { 
    paddingTop: 20, 
    color: '#fff', 
    fontSize: 13, 
    fontWeight: '500', 
    textAlign: 'center', 
    fontFamily: "Raleway-Bold", 
    }, 
}); 


class intro extends Component { 
    doneBtnHandle =() => { 
    this.props.navigator.push({name: 'mainApp'}) 
    } 
    onSlideChangeHandle = (index, total) => { 
    console.log(index, total); 
    } 
    render() { 
    return (
     <AppIntro 
     onNextBtnClick={this.nextBtnHandle} 
     onDoneBtnClick={this.doneBtnHandle} 
     onSlideChange={this.onSlideChangeHandle} 
     doneBtnLabel='Done' 
     skipBtnLabel='' 
     nextBtnLabel='>' 
     > 
     <View style={[styless.slide, { backgroundColor: '#555555' }]}> 
     <View level={-25}> 
      <Text style={styless.Desc1}>Welcome!</Text> 
     </View> 
     </View> 
     <View style={[styless.slide,{ backgroundColor: '#527bac' }]}> 
     <View level={-25}> 
      <Text style={styless.Desc1}>The Answer!</Text> 
     </View> 
     </View> 
     <View style={[styless.slide, { backgroundColor: '#33691e' }]}> 
     <View level={-25}> 
      <Text style={styless.Desc1}>The Question!</Text> 
     </View> 
     </View> 
     </AppIntro> 

    ); 
    } 
} 

module.exports = intro; 

Вот мой --main.js (в этом коде я использую TabBarIOS и автоматически использовать --nargo.ios.js в качестве начальной страницы здесь):

'use strict'; 

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    TabBarIOS, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 

import Icon from 'react-native-vector-icons/Ionicons'; 
import nargo from './nargo.ios'; 

class Main extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     selectedTab: 'nargo' 
    }; 
    } 


    render() { 
    return (
     <TabBarIOS selectedTab={this.state.selectedTab} 
     barTintColor='#dcdcdc'> 
     <Icon.TabBarItem 
      title="nargo" 
      iconName="ios-home" 
      selectedIconName="ios-home" 
      selected={this.state.selectedTab === 'nargo'} 
      onPress={() => { 
       this.setState({ 
        selectedTab: 'nargo', 
       }); 
      }}> 
     </Icon.TabBarItem> 
     <Icon.TabBarItem 
      onPress={() => { 
       this.setState({ 
        selectedTab: 'chat', 
       }); 
      }} 
      selected={this.state.selectedTab === 'chat'} 
      title="Chat" 
      iconName="ios-chatbubbles" 
      selectedIconName="ios-chatbubbles"> 
     </Icon.TabBarItem> 
     </TabBarIOS> 
    ); 
    } 
} 


module.exports = Main; 

Вот мой --nargo.js (в этом коде, где проблемы приходят. Когда кнопка купить нажата, я хочу маршрутов --buy.js страницы):

'use strict'; 

import React, { Component } from 'react'; 
import { 
    StyleSheet, 
    View, 
    Text, 
    ListView, 
    TouchableHighlight, 
    AlertIOS, 
    SwitchIOS, 
    ScrollView, 
    TouchableOpacity, 
    Navigator 
} from 'react-native'; 

const styles = require('./styles.js'); 

import * as Animatable from 'react-native-animatable'; 
import Collapsible from 'react-native-collapsible'; 
import Accordion from 'react-native-collapsible/Accordion'; 


class nargo extends Component { 
    render() { 
    var _scrollView: ScrollView; 
    return (
     <View style={styles.container}> 
     <ScrollView 
      ref={(scrollView) => { _scrollView = scrollView; }} 
      automaticallyAdjustContentInsets={false} 
      scrollEventThrottle={200} 
      style={styles.scrollView}> 

      <TouchableOpacity 
      style={styles.buttonContainer} 
      onPress={() => { 
       this.props.navigator.push({name: 'buy'}) 
      }} 
      > 
       <Text style={styles.buttonText}>Buy !</Text> 
      </TouchableOpacity> 

     </ScrollView> 

     </View> 
    ); 
    } 

} 

module.exports = nargo; 

Вот мой --buy.js

'use strict'; 

import React, { Component } from 'react'; 
import { 
    StyleSheet, 
    View, 
    Text, 
} from 'react-native'; 

class cak extends Component { 
    render() { 
    return (
     <View> 
     <Text> 
      Holla! 
     </Text> 
     </View> 
    ); 
    } 
} 

module.exports = cak; 

Я пробовал этот код и дал мне этот экран с ошибкой:

Может ли кто-нибудь помочь мне исправить эти проблемы? Спасибо заранее.

========= ======== решаемые
Я добавил <nargo navigator={this.props.navigator} /> линию к первому TabBariOS. Спасибо за тех, кто мне помогает.

'use strict'; 

import React, { Component } from 'react'; 
import { 
    AppRegistry, 
    TabBarIOS, 
    StyleSheet, 
    Text, 
    View 
} from 'react-native'; 
import buy from './buy'; 

import Icon from 'react-native-vector-icons/Ionicons'; 
import nargo from './nargo.ios'; 


class Main extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     selectedTab: 'nargo' 
    }; 
    } 


    render() { 
    return (
     <TabBarIOS selectedTab={this.state.selectedTab} 
     barTintColor='#dcdcdc'> 
     <Icon.TabBarItem 
      title="nargo" 
      iconName="ios-home" 
      selectedIconName="ios-home" 
      selected={this.state.selectedTab === 'nargo'} 
      onPress={() => { 
       this.setState({ 
        selectedTab: 'nargo', 
       }); 
      }}> 
      <nargo navigator={this.props.navigator} /> 
     </Icon.TabBarItem> 
     <Icon.TabBarItem 
      onPress={() => { 
       this.setState({ 
        selectedTab: 'chat', 
       }); 
      }} 
      selected={this.state.selectedTab === 'chat'} 
      title="Chat" 
      iconName="ios-chatbubbles" 
      selectedIconName="ios-chatbubbles"> 
     </Icon.TabBarItem> 
     </TabBarIOS> 
    ); 
    } 
} 


module.exports = Main; 

Answer 1

Вы должны пройти компонент внутри элемента бара на вкладке также передать навигатор, если вы хотите, чтобы перемещаться по компоненте здесь приведен пример:

<TabBarIOS selectedTab={this.state.selectedTab} 
    barTintColor='#dcdcdc'> 
    <Icon.TabBarItem 
     title="nargo" 
     iconName="ios-home" 
     selectedIconName="ios-home" 
     selected={this.state.selectedTab === 'nargo'} 
     onPress={() => { 
      this.setState({ 
       selectedTab: 'nargo', 
      }); 
     }}> 

    //here you should pass the component and the navigator, ex: 
    <ComponentName navigator={this.props.navigator} /> 

    </Icon.TabBarItem>