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中使用它（或者如果您使用的是ReactNavigation 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>
    );
  }