React-Native Navigator: Невозможно прочитать свойство "push" из неопределенного

Question

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

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

проект
- Android /
- резервное копирование/
- IOS /
- node_modules /
- срк /
- 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) при нажатии кнопки "Готово"):

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>