React-Native: перейдите в ящик внутри стекового навигатора - PullRequest
0 голосов
/ 30 июня 2018

Мое приложение в настоящее время использует навигатор в качестве основной навигации.

Одним из экранов ящика является StackNavigator. Первый экран в этом вложенном StackNavigator содержит кнопку, которая должна направлять пользователя на экран DrawerNavigator.

Как у меня может быть кнопка на моем экране StackNavigator «Домой», которая переходит к его родительскому экрану DrawerNavigator «Журналы»?

Stack Navigator («Дом» - это компонент с кнопкой, которая должна указывать на «Журналы» на экране ящика):

const Stack = createStackNavigator({
    Home: {
        screen: Home,
        navigationOptions: { header: null }
    },
    Settings: {
        screen: Settings,
        navigationOptions: { header: null }
    }
});

Стек с заголовком:

class StackWithHeader extends Component {
    render() {
        return (
            <Container>
                <Head title="Consultation" drawerOpen={() => this.props.navigation.dispatch(DrawerActions.openDrawer())} />
                <Stack/>
            </Container>
        )
    }
}

Ящик-навигатор с вложенным стековым навигатором:

const Drawer = createDrawerNavigator(
    {
        Head: {
            screen: StackWithHeader,
            navigationOptions: ({ navigation }) => ({
                title: "Head",
                headerLeft: <Icon name="menu" style={{ paddingLeft: 10 }} onPress={() => this.props.navigation.dispatch(DrawerActions.openDrawer())} />,
            })
        },
        Logs: {
            screen: Logs,
            navigationOptions: ({ navigation }) => ({
                title: "Logs",
                headerLeft: <Icon name="menu" style={{ paddingLeft: 10 }} onPress={() => this.props.navigation.dispatch(DrawerActions.openDrawer())} />,
            })
        },
    }
);  

1 Ответ

0 голосов
/ 01 июля 2018

Использование NavigationActions может помочь вам в этом случае

import { NavigationActions } from 'react-navigation';

...
_onPress = () => {
  this.props.navigation.dispatch(
    NavigationActions.navigate({
      routeName: 'Logs',
      params: {},
      // optional, you can navigate to sub-route of Logs here by
      // action: NavigationActions.navigate({ routeName: 'SubRoute' }),
    })
  )
}

Кстати, я рекомендую вам интегрировать redux с react-navigation для простой навигации. См. здесь

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...