Инструменты разработчика¶

Инструменты разработчика для облегчения отладки при использовании React Navigation.

Чтобы воспользоваться инструментами разработчика, установите @react-navigation/devtools:

1

npm install @react-navigation/devtools

Хуки из этого пакета работают только во время разработки и отключаются в производстве. Чтобы удалить их из производственной сборки, не нужно делать ничего особенного.

Определение API¶

Пакет предоставляет следующие API:

useFlipper¶

Этот хук обеспечивает интеграцию с Flipper для приложений React Native.

Чтобы использовать этот хук, необходимо:

• Настроить Flipper в вашем приложении React Native, если он еще не настроен.

• Установить пакет react-native-flipper в ваше приложение:

  1	npm install --save-dev react-native-flipper

• Установите плагин react-navigation в приложении Flipper

  

Использование:.

Чтобы использовать хук, импортируйте его и передайте в качестве аргумента ref на NavigationContainer:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

import * as React from 'react';
import {
    NavigationContainer,
    useNavigationContainerRef,
} from '@react-navigation/native';
import { useFlipper } from '@react-navigation/devtools';

export default function App() {
    const navigationRef = useNavigationContainerRef();

    useFlipper(navigationRef);

    return (
        <NavigationContainer ref={navigationRef}>
            {/* ... */}
        </NavigationContainer>
    );
}

Теперь вы сможете использовать инструменты React Navigation devtools в Flipper, когда ваше устройство подключено к Flipper.

useReduxDevToolsExtension¶

Этот хук обеспечивает интеграцию с Redux DevTools Extension. Он также работает с React Native Debugger app, которое включает это расширение.

Использование:

Чтобы использовать хук, импортируйте его и передайте в качестве аргумента ref на NavigationContainer:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18

import * as React from 'react';
import {
    NavigationContainer,
    useNavigationContainerRef,
} from '@react-navigation/native';
import { useReduxDevToolsExtension } from '@react-navigation/devtools';

export default function App() {
    const navigationRef = useNavigationContainerRef();

    useReduxDevToolsExtension(navigationRef);

    return (
        <NavigationContainer ref={navigationRef}>
            {/* ... */}
        </NavigationContainer>
    );
}

Теперь вы сможете видеть логи из React Navigation в расширении Redux DevTools Extension, например, при отладке приложения с помощью приложения React Native Debugger.

Ссылки¶

• Developer tools

Комментарии