undefined не является объектом (оценивается как _this.props.navigation.navigate), когда представление вызывается из вкладок, этот props.navigation становится неопределенным

Question

Я застрял здесь в течение последних нескольких дней, перепробовал почти все, что связано с реакцией навигации, но не повезло.Здесь поток.После загрузки ящика в главном меню я вызываю вид из вкладок, в котором я вызываю вид главного экрана, а на главном экране я пытаюсь перейти к экрану категорий.но получаю эту ошибку.this.props.navigation становится неопределенным в tabs.js, но имеет значение на предыдущем экране, который является основным.Пожалуйста, помогите.

App.js

export default class App extends React.Component {
    constructor(){
        super();
  this.state = {
    showRealApp: false
  }

}
  _onDone = () => {

    this.setState({ showRealApp: true });
  }


  render() {
    if (this.state.showRealApp) {
      return <Navigator />;
    } else {
      return <AppIntroSlider slides={slides} onDone={this._onDone}/>;
    }
  }
}

AppRegistry.registerComponent('App', () => App)

AppNavigator.js

 import { createStackNavigator, createAppContainer } from "react-navigation";
    const RootStack = createStackNavigator({
    Main: {
    screen: Main,
    navigationOptions: {header: null,}
  },
  Tabss: {
      screen: Tabss,
      navigationOptions: {header: null,}
  },
   Home: {
    screen: Home,
    navigationOptions: {header: null,}
   },
  SelectCategory: {
    screen: SelectCategory,
    navigationOptions: {header: null, }
  },

 });
   const App = createAppContainer(RootStack);
   export default App;

Main.js

`

export default class Main extends Component {
  constructor(props)
  {
    super(props);
  }
  closeDrawer = () => {
    this.drawer._root.close()
  };
  openDrawer = () => {
  this.drawer._root.open()
  };
  render() {
   // alert(this.props.navigation)
    return (
              <Drawer
                ref={(ref) => { this.drawer = ref; }}
               // { data: { avatar: this.state.avatar, name: this.state.name }

               content={<Sidebar />}
                onClose={() => this.closeDrawer()} >
                 <AppHeader
                    openDrawer={this.openDrawer.bind(this)}
                />
                /////////////////// Calling Tab view///////
                 <Tabss />
                 </Drawer>
    );
  }
}

module.exports = Main;`

Tabs.js

export default class TabBars extends Component {
  constructor(props){
    super(props);
  }

  render() {
    return (
      <Container>
        <Tab renderTabBar={() => <ScrollableTab style={{backgroundColor:'#DAA520'}} />  }>
          <TabHeading={<TabHeading style={{backgroundColor: '#DAA520'}}>
            <Icon name="home" style={{ color: 'white' }} />
          </TabHeading>}>
          <Home  />
        </Tab>
      ............
      </Container>
    )}

Home.js

export default class Home extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return(
      <View>
        <Button  onPress={() => 
          this.props.navigation.navigate("SelectCategory")} style= 
          {{backgroundColor:'white', width: 210, height: 50, marginBottom: 30, alignItems: 'center', justifyContent: 'center'}}> 
          <Text style={{color: '#4169E1', fontSize: 18, fontWeight:'bold'}}> 
            Select and PLAY 
          </Text> 
        </Button>
      </View>
    );
  }

Answer 1

При отправке вида на другой экран следует отправлять реквизиты.

Main.js

    render() {


    return (
              <Drawer
                ref={(ref) => { this.drawer = ref; }}


               content={<Sidebar />}
                onClose={() => this.closeDrawer()} >
                 <AppHeader
                    openDrawer={this.openDrawer.bind(this)}
                />

                <Tabss data={this.props.navigation} />

                 </Drawer>
    );

  }

TabBar.js

    export default class TabBars extends Component {
  constructor(props){
    super(props);
  }

  render() {
    return (
      <Container>
        <Tab renderTabBar={() => <ScrollableTab style={{backgroundColor:'#DAA520'}} />  }>
          <TabHeading={<TabHeading style={{backgroundColor: '#DAA520'}}>
            <Icon name="home" style={{ color: 'white' }} />
          </TabHeading>}>
          <Home data ={this.props.data}  />
        </Tab>
      ............
      </Container>
    )}

home.js

export default class Home extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    return(
      <View>
        <Button   onPress= {()=> this.props.data.navigate("SelectCategory")} style= 
          {{backgroundColor:'white', width: 210, height: 50, marginBottom: 30, alignItems: 'center', justifyContent: 'center'}}> 
          <Text style={{color: '#4169E1', fontSize: 18, fontWeight:'bold'}}> 
            Select and PLAY 
          </Text> 
        </Button>
      </View>
    );
  }

Answer 2

Измените ваш Home.js на это и посмотрите, работает ли он:

Кроме того, я предполагаю, что вы правильно экспортировали свой RootStack и используете его в App.js (или если вы используете responseNavigation 3.0, выправильно создал ваш appContainer)

export default class Home extends Component {
  constructor(props) {
    super(props);
  }
  render() {
    const { navigate } = this.props.navigation;
    return(
      <View>
        <Button  onPress={() => 
          navigate('SelectCategory')} 
          style= {{backgroundColor:'white', width: 210, height: 50, marginBottom: 30, alignItems: 'center', justifyContent: 'center'}}
        > 
          <Text style={{color: '#4169E1', fontSize: 18, fontWeight:'bold'}}> 
            Select and PLAY 
          </Text> 
        </Button>
      </View>
    );
  }