Расширенный учебник от навигатора до реактивной навигации

вместе сreact-navigationПостепенно стабилизировалось, и штурман был с честью отправлен в отставку. В экосистеме React Native нужен расширяемый и простой в использовании навигационный компонент, а Navigator, естественно, некомпетентен.На данный момент сообщество React Native вывело навигационный компонент с открытым исходным кодом.react-navigation.

react-navigationПоявление Navigator, Ex-Navigation и других навигационных компонентов старого поколения, react-navigation можно назвать расширенной версией Navigator, не только обладающей всеми функциями Navigator, но также поддерживающей навигацию снизу, аналогичную UITabBarController в iOS, кроме того, это также Навигация, которая поддерживает метод эффекта бокового вытягивания, аналогичен эффекту ящика в Android.

Эта статья поделится с вами некоторыми практическими навыками реактивной навигации, а также некоторым практическим опытом от навигатора до реактивной навигации. Кроме того, вы также можете изучить видеоверсию, которая сопровождает этот урок:"Новый навигатор по реактивной навигации"

Что такое навигатор?

Навигатор также можно рассматривать как обычный компонент React, вы можете определить структуру навигации вашего приложения через навигатор. Навигаторы также могут отображать общие элементы, такие как настраиваемые строки заголовков и панели вкладок.

В реактивной навигации есть три типа навигаторов:

StackNavigator: аналогичен обычному навигатору, панель навигации в верхней части экрана;
TabNavigator: эквивалент TabBarController в iOS, панель вкладок внизу экрана;
DrawerNavigator: эффект ящика, боковая выдвижная часть;

{:height="90%" width="90%"}

Вы можете использовать три вышеперечисленных навигатора для создания вашего приложения, которое может быть одним из них или их комбинацией.Это может быть выбрано в соответствии с конкретным сценарием приложения и характеристиками каждого навигатора.

Прежде чем мы начнем изучать три типа навигаторов, нам нужно понять концепции двух и навигации:

Screen navigation prop(屏幕导航属性): планирование операций между экранами может быть выполнено с помощью навигации, например открытие другого экрана;
Screen navigationOptions(屏幕导航选项): через navigationOptions можно настроить способ отображения экрана навигатором (например: заголовок заголовка, ярлык вкладки и т. д.);

Пропсы, поддерживаемые навигатором

const SomeNav = StackNavigator/TabNavigator/DrawerNavigator({
  // config
});

<SomeNav
  screenProps={xxx}
  ref={nav => { navigation = nav; }}
  onNavigationStateChange=(prevState, newState, action)=>{
  	
  }
/>

@Новый навигатор, реагирующая на навигацию, прекрасный разговор

ссылка: может пройтиrefсобственность получитьnavigation;
onNavigationStateChange(prevState, newState, action): узлы верхнего уровня, кромеrefВ дополнение к атрибутам также примитеonNavigationStateChange(prevState, newState, action)свойство, каждый раз, когда навигатор управляетstateКогда произойдет изменение, этот метод будет вызван обратно;
- prevState: состояние до изменения;
- новое состояние: новое состояние;
- Действие, которое вызывает изменение состояния;
screenProps: передать дочернему экрану дополнительные данные, которые дочерний экран может получить через this.props.screenProps.

Screen Navigation Prop (экранная навигация Prop)

При открытии экрана в навигаторе он получаетnavigationопора,navigationProp является ключевым элементом всего процесса навигации, и далее я подробно объясню его.navigationэффект.

навигация содержит следующие функции:

навигация: переход к другим интерфейсам;
состояние: текущее состояние экрана;
setParams: изменить параметры маршрута;
goBack: закрыть текущий экран;
диспетчеризация: отправить действие на маршрут;

Примечание. Навигация может не иметь навигации, setParams и goBack, а только состояние и отправку, поэтому при использовании навигации необходимо оценивать.Если навигации нет, вы можете использовать навигацию для отправки нового действия. Такие как:

const {navigation,theme,selectedTab}=this.props;
const resetAction = NavigationActions.reset({
    index: 0,
    actions: [
        NavigationActions.navigate({
            routeName: 'HomePage',
            params:{
                theme:theme,
                selectedTab:selectedTab
            },
        })
    ]
})
navigation.dispatch(resetAction)

@Новый навигатор, реагирующая на навигацию, прекрасный разговор

Используйте навигацию для перехода между интерфейсами

navigate(routeName, params, action)
- routeName: имя маршрута интерфейса для перехода, то есть имя маршрута, настроенное в навигации;
- params: параметры для передачи следующему интерфейсу;
- действие: если интерфейс является навигатором, будет выполнено это поддействие.

export const AppStackNavigator = StackNavigator({
    HomeScreen: {
        screen: HomeScreen
    },
    Page1: {
        screen: Page1
    })

class HomeScreen extends React.Component {
  render() {
    const {navigate} = this.props.navigation;

    return (
      <View>
        <Text>This is HomeScreen</Text>
        <Button
          onPress={() => navigate('Page1', {name: 'Devio'})}
          title="Go to Page1"
        />
      </View>
     )
   }
}

@Новый навигатор, реагирующая на навигацию, прекрасный разговор

Использовать параметры состояния

Можно получить через this.props.state.paramssetParams(),илиnavigation.navigate()переданные параметры.

<Button
    title={params.mode === 'edit' ? '保存' : '编辑'}
    onPress={() =>
        setParams({mode: params.mode === 'edit' ? '' : 'edit'})}
/>
<Button
    title="Go To Page1"
    onPress={() => {
        navigation.navigate('Page1',{ name: 'Devio' });
    }}
/>
const {navigation} = this.props;
const {state, setParams} = navigation;
const {params} = state;
const showText = params.mode === 'edit' ? '正在编辑' : '编辑完成';

@Новый навигатор, реагирующая на навигацию, прекрасный разговор

Используйте setParams для изменения параметров маршрута

setParams: function setParams(params): мы можем использоватьsetParamsизменить параметры маршрута, например,setParamsобновить заголовок в верхней части страницы, кнопку «Назад» и т. д.;

class ProfileScreen extends React.Component {
  render() {
    const {setParams} = this.props.navigation;
    return (
      <Button
        onPress={() => setParams({name: 'Lucy'})}
        title="Set title name to 'Lucy'"
      />
     )
   }
}

@Новый навигатор, реагирующая на навигацию, прекрасный разговор

Обратите внимание, что navigation.setParams изменяет параметры текущей страницы, если вы хотите изменить параметры других страниц, вы можете сделать это через NavigationActions.setParams, о чем будет сказано ниже.

Используйте goBack, чтобы вернуться на предыдущую страницу или указанную страницу

goBack: function goBack(key): мы можем использоватьgoBackВозврат на предыдущую страницу или указанную страницу стека маршрутизации.
- вkeyУказывает идентификатор страницы, на которую вы хотите вернуться, напримерid-1517035332238-4, а не имя_маршрута.
- указав страницуnavigation.state.keyчтобы получить идентификатор страницы.
- Ключ передавать не обязательно, также можно передать null.
```
navigation.state
{params: {…}, key: "id-1517035332238-4", routeName: "Page1"}	```
```

export default class Page1 extends React.Component {
    render() {
        const {navigation} = this.props;
        return <View style={{flex: 1, backgroundColor: "gray",}}>
            <Text style={styles.text}>欢迎来到Page1</Text>
            <Button
                title="Go Back"
                onPress={() => {
                    navigation.goBack();
                }}
            />
        </View> 
    }
}

@Новый навигатор, реагирующая на навигацию, прекрасный разговор

Отправить действие через диспетчеризацию

dispatch: function dispatch(action): Установить действие для текущего интерфейса, которое заменит исходный прыжок, откат и другие события.

const resetAction = NavigationActions.reset({
	index: 0,
	actions: [
	    NavigationActions.navigate({
	        routeName: 'HomePage',
	        params:{
	            theme:theme,
	            selectedTab:selectedTab
	        },
	    })
	]
	})
navigation.dispatch(resetAction)

@Новый навигатор, реагирующая на навигацию, прекрасный разговор

NavigationActions

Навигация: переход на другие страницы;
Сброс: сброс текущего состояния в новое состояние;
Назад : вернуться на предыдущую страницу;
Установить параметры: установить параметры указанной страницы;
Init : инициализировать состояние, если состояние не определено;

routeName: строка, обязательная, routeName пункта назначения навигации, зарегистрированного в маршрутизаторе приложения.
params: объект, необязательный, параметры, которые интегрированы в маршрут назначения.
действия: объект, необязательный (расширенный), если экран также является навигатором, вторичные действия могут выполняться в дочерних маршрутизаторах. Любые действия, описанные в документации, могут использоваться как второстепенные действия.

import { NavigationActions } from 'react-navigation'

const navigateAction = NavigationActions.navigate({
  routeName: 'Profile',
  params: {},
  action: NavigationActions.navigate({ routeName: 'SubProfileRoute'})
})
this.props.navigation.dispatch(navigateAction)

@Новый навигатор, реагирующая на навигацию, прекрасный разговор

Сброс настроек:

Действие «Сброс» удаляет все состояния навигации и вместо этого использует результат этого действия.

index, number, required, индекс активированного маршрута в массиве маршрутов в состоянии навигации.
Действия, массив, обязательные, навигационные действия массивов, заменит состояние навигации.

import { NavigationActions } from 'react-navigation'

const resetAction = NavigationActions.reset({
  index: 0,
  actions: [
    NavigationActions.navigate({ routeName: 'Profile'})
  ]
})
this.props.navigation.dispatch(resetAction)

@Новый навигатор, реагирующая на навигацию, прекрасный разговор

Используйте сценарии, такие как заставка после входа на домашнюю страницу приложения, не используется, тогда вы можете использоватьNavigationActions.resetсбросить его.

Параметр index используется для настройки текущего активного маршрута. Например: используйте два маршрута WelcomePage и HomePage для базовой настройки навигации по стеку. Чтобы сбросить маршрут на домашнюю страницу, но выше приветственной страницы в стеке, вы можете сделать:

import { NavigationActions } from 'react-navigation'

const resetAction = NavigationActions.reset({
    index: 1,
    actions: [
        NavigationActions.navigate({ routeName: 'WelcomePage'}),
        NavigationActions.navigate({ routeName: 'HomePage'})
    ]
});
this.props.navigation.dispatch(resetAction);

@Новый навигатор, реагирующая на навигацию, прекрасный разговор

Back

Вернитесь к предыдущему экрану и закройте текущий экран. Создатель backaction принимает необязательный параметр:

key: это может быть концепция с упомянутой выше клавишей goBack;

import { NavigationActions } from 'react-navigation'
const backAction = NavigationActions.back();
this.props.navigation.dispatch(backAction);

SetParams

Через SetParams мы можем изменить параметры указанной страницы.

params: объект, требуемые параметры, будут объединены с параметрами существующей страницы.
ключ: Строка, обязательный параметр, ключ страницы.

import { NavigationActions } from 'react-navigation'
const setParamsAction = NavigationActions.setParams({
    params: { title: 'HomePage' },
    key: 'id-1517035332238-4',
});

Многие мелкие партнеры могут спросить: зачем должен быть NavigationActions.setParams, когда в навигации есть setParams?

Я отвечу на этот вопрос двумя способами:

Как упоминалось выше, в навигации могут быть только состояние и диспетчеризация.В настоящее время, если вы хотите изменить параметры страницы, вы можете передать толькоNavigationActions.setParams;
Кроме того, navigation.setParams может изменять параметры только текущей страницы, в то время какNavigationActions.setParamsПараметры всех страниц могут быть изменены;

А эти сценарии применения?

Используйте функцию навигации вне экрана навигатора (используйте ссылку навигатора)

Есть сценарий: иногда нам нужно использовать навигатор для перехода по страницам за пределы экрана, определенного в навигаторе.

Для перехода между экранами требуется помощьnavigationзавершить;
Мы знаем, что экран навигатора можно определитьconst {navigation} = this.props;получитьnavigation;
Затем, если мы выполним ключевой шаг перехода по экрану на экране, определенном в не-навигаторе, он должен понять идеюnavigation;
Итак, как я могу получить это в экране, который не определяется в навигатореnavigationШерстяная ткань?

Следующее объяснит вам черезrefсвойства также получаютnavigation:

См. код для примера:

import { NavigationActions } from 'react-navigation';

const AppNavigator = StackNavigator(SomeAppRouteConfigs);

class App extends React.Component {
  someEvent() {
    // call navigate for AppNavigator here:
    this. navigation && this. navigation.dispatch(
      NavigationActions.navigate({ routeName: someRouteName })
    );
  }
  render() {
    return (
      <AppNavigator ref={nav => { navigation = nav; }} />
    );
  }
}

Приведенный выше код проходитузел верхнего уровня навигатораизrefсобственность получитьnavigation, когда приведенный выше кодAppNavigatorПри рендере ноды будет вызван реф, который можно получитьnavigationТеперь необходимо напомнить, что это использование неStackNavigatorДва других типа навигаторов также практичны;

Ссылаться на:"Новый навигатор по реактивной навигации"

Что такое навигатор?

Пропсы, поддерживаемые навигатором

Screen Navigation Prop (экранная навигация Prop)

Используйте навигацию для перехода между интерфейсами

Использовать параметры состояния

Используйте setParams для изменения параметров маршрута

Используйте goBack, чтобы вернуться на предыдущую страницу или указанную страницу

Отправить действие через диспетчеризацию

NavigationActions

Навигация:

Сброс настроек:

Back

SetParams

А эти сценарии применения?

Используйте функцию навигации вне экрана навигатора (используйте ссылку навигатора)

См. код для примера: