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>
    );
  }

从选项卡调用视图时，undefined不是对象（评估'_this.props.navigation.navigate'），此props.navigation变为未定义

2 个答案: