Question

我设法将初始路线名称从父导航器传递给子导航器，但是Drawer中的“注销”按钮不起作用（不执行任何操作，没有错误）。是因为我创建了多个AppContainer吗？

NavApp.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}  />
        )
    }
}

NavDrawer.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}  />
        )
    }
}

SideMenu.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>
        )
    }
}

Answer 1

常见错误：明确渲染多个导航器。

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

如何通过父导航器定义子导航器的初始路线名称？

1 个答案: