如何从父导航器定义子导航器的初始路线名称?



我设法将初始路由名称从父导航器传递到子导航器,但抽屉中的注销按钮不起作用(什么都不做,没有错误)。是因为我创建了多个应用容器吗?

导航.js

const routeConfigs = {
    NavGuest: { screen: NavGuest },
    NavDrawer: { screen: NavDrawer }
}
const AppContainerIn = (props) => {
    navConfigs.initialRouteName = props.initialRouteName;
    let switchNav = createSwitchNavigator(routeConfigs, navConfigs);
    let AppContainerOut = createAppContainer(switchNav);
    return <AppContainerOut />
}
export default class NavApp extends Component {
    render() {
        return (
            <AppContainerIn initialRouteName={this.props.initialRouteName}  />
        )
    }
}

导航抽屉.js

const routeConfigs = {
    Wizard: { screen: Wizard },
    NavHomeSearch: { screen: NavHomeSearch },
}
const navConfigs = {
    contentComponent: SideMenu,
    drawerWidth: Dimensions.get('window').width - 120,
}
const ContainerDrawerIn = (props) => {
    navConfigs.initialRouteName = props.initialRouteName;
    let NavDrawer = createDrawerNavigator(routeConfigs, navConfigs);
    let ContainerDrawerOut = createAppContainer(NavDrawer);
    return <ContainerDrawerOut />
}
export default class ContainerDrawer extends Component {
    render() {
        return (
            <ContainerDrawerIn initialRouteName={this.initialRouteName}  />
        )
    }
}

侧边菜单.js

export default class SideMenu extends Component {
    constructor(props) {
        super(props);
        this.navigation = props.navigation;
    }
    logout = () => {
        AsyncStorage.removeItem('isLoggedin');
        // Help, not going anywhere. Btw, isLoggedin is successfully removed.
        this.props.navigation.navigate('NavGuest');
    }
    render() {
        return (
            <View>
                <Button title='Log Out' onPress={() => this.logout()} />
            </View>
        )
    }
}

常见错误:显式呈现多个导航器。

https://reactnavigation.org/docs/en/common-mistakes.html

export default class App extends React.Component {
  render() {
    /* In the root component we are rendering the app navigator */
    return <AppContainer />;
  }
}
const AuthenticationNavigator = createStackNavigator({
  SignIn: SignInScreen,
  ForgotPassword: ForgotPasswordScreen,
});
class AuthenticationScreen extends React.Component {
  static router = AuthenticationNavigator.router;
  render() {
    return (
      <AuthenticationNavigator navigation={this.props.navigation} />
    );
  }
}
const AppNavigator = createSwitchNavigator({
  Auth: AuthenticationScreen, // This screen renders a navigator!
  Home: HomeScreen,
});
const AppContainer = createAppContainer(AppNavigator);

相关内容

  • 没有找到相关文章

最新更新