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