Typescript로 내비게이션 반응하기

그래서.. Typescript로 React Native 앱을 만들고 싶고 React Navigation을 탐색 라이브러리로 사용하기로 결정했습니다.

모든 Typescript 항목을 설정하고 앱을 실행했습니다!

React Navigation을 추가하면 모두 괜찮습니다!

하지만.. 매개변수가 필요한 화면과 헤더를 편집하려는 화면 등을 추가합니다. 검색해도 정보가 많이 없네요...

다음은 Typescript와 함께 React Navigation을 사용한 방법에 대한 스니펫입니다.

부인 성명

Typed React Navigation을 구현하는 방법에는 여러 가지가 있습니다. 이것은 단지 몇 가지 예일 뿐이며 사물의 이름은 귀하의 응용 프로그램에 맞게 고려되어야 합니다.

그것을 해결하는 다른 방법에 대한 의견은 감사합니다!

첫째, 클래스 대 함수 ...

후크와 함께 함수 구성 요소를 사용하는 것을 정말 좋아합니다.
그러나 현재 함수 구성 요소를 사용하는 경우 핫 리로딩에 문제가 있습니다.
참조: https://github.com/facebook/react-native/issues/10991

작동하지 않습니다. 기능적 구성 요소를 클래스로 래핑하는 솔루션이 있을 수 있지만 이 문제가 곧 해결되기를 바랍니다.

나는 https://github.com/react-navigation/hooks 기반의 useNavigation 후크를 사용할 것입니다.
그러나 저장소가 그다지 활성화되지 않았기 때문에 이 기능을 "도용"하고 약간 수정했습니다.

import { useContext } from 'react';
import {
  NavigationScreenProp,
  NavigationRoute,
  NavigationContext,
} from 'react-navigation';

export function useNavigation<Params>() {
  return useContext(NavigationContext) as NavigationScreenProp<
    NavigationRoute,
    Params
  >;
}

따라서 내 예제는 클래스와 기능적 구성 요소 모두에 대한 것입니다.

헤더 제목 업데이트 및 탐색

클래스 구성요소

import React, { Component } from 'react';
import { Button, Text, View } from 'react-native';
import {
  NavigationParams,
  NavigationScreenProp,
  NavigationState,
} from 'react-navigation';

interface Props {
  navigation: NavigationScreenProp<NavigationState, NavigationParams>;
}

class TestScreen extends Component<Props> {
  public static navigationOptions = {
    title: 'Test Screen',
  };

  render() {
    const { navigation } = this.props;
    return (
      <View>
        <Text>Test Screen</Text>
        <Button
          title="Button"
          onPress={() => {
            navigation.navigate('anotherTestScreen');
          }}
        />
      </View>
    );
  }
}

export default TestScreen;

내비게이션에 직접 설정된 화면에만 내비게이션 속성이 있습니다. 하위 구성 요소가 탐색에 액세스할 수 있도록 하려면 다음과 같이 할 수 있습니다.

import React, { Component } from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationInjectedProps, withNavigation } from 'react-navigation';

class TestComponent extends Component<NavigationInjectedProps> {
  render() {
    const { navigation } = this.props;
    return (
      <Button
        title="Button"
        onPress={() => {
          navigation.navigate('anotherTestScreen');
        }}
      />
    );
  }
}

export default withNavigation(TestComponent);

기능 구성요소

import React from 'react';
import { Button, Text, View } from 'react-native';
import { useNavigation } from '../hooks/useNavigation';

const AnotherTestScreen = () => {
  const navigation = useNavigation();
  return (
    <View>
      <Text>Test Screen</Text>
      <Button
        title="Button"
        onPress={() => {
          navigation.navigate('paramScreen', { text: 'Hi!' });
        }}
      />
    </View>
  );
};

AnotherTestScreen.navigationOptions = {
  title: 'Another Test Screen',
};

export default AnotherTestScreen;

화면에 입력된 매개변수

클래스 구성요소

import React, { Component } from 'react';
import { Button, Text, View } from 'react-native';
import { NavigationScreenProp, NavigationState } from 'react-navigation';

interface NavigationParams {
  text: string;
}

type Navigation = NavigationScreenProp<NavigationState, NavigationParams>;

interface Props {
  navigation: Navigation;
}

class ParamScreen extends Component<Props> {
  public static navigationOptions = ({
    navigation,
  }: {
    navigation: Navigation;
  }) => ({
    title: navigation.state.params ? navigation.state.params.text : '',
  });

  render() {
    const { navigation } = this.props;
    const {
      state: { params },
    } = navigation;
    return (
      <View>
        <Text>Param: {params ? params.text : ''}</Text>
        <Button
          title="Button"
          onPress={() => {
            navigation.navigate('anotherParamScreen', { text: 'Hello!' });
          }}
        />
      </View>
    );
  }
}

export default ParamScreen;

스스로에게 물어볼 수 있는 많은 추가 타이핑 코드로 귀찮게 하는 이유는 무엇입니까? 그냥 any 를 사용하지 않는 이유는 무엇입니까?
글쎄요, 이 예는 최고가 아닐 수도 있지만 이제 매개변수가 입력되었으며 편집기에서 intellisense 도움말을 얻을 수 있습니다.

기능 구성요소

import React from 'react';
import { Button, Text, View } from 'react-native';
import {
  NavigationScreenProp,
  NavigationState,
  StackActions,
  NavigationActions,
} from 'react-navigation';
import { useNavigation } from '../hooks/useNavigation';

interface NavigationParams {
  text: string;
}

type Navigation = NavigationScreenProp<NavigationState, NavigationParams>;

const AnotherParamScreen = () => {
  const navigation = useNavigation<NavigationParams>();
  const {
    state: { params },
  } = navigation;
  return (
    <View>
      <Text>Param: {params ? params.text : ''}</Text>
      <Button
        title="Button"
        onPress={() => {
          const resetAction = StackActions.reset({
            index: 0,
            actions: [NavigationActions.navigate({ routeName: 'testScreen' })],
          });
          navigation.dispatch(resetAction);
        }}
      />
    </View>
  );
};

AnotherParamScreen.navigationOptions = ({
  navigation,
}: {
  navigation: Navigation;
}) => ({
  title: navigation.state.params ? navigation.state.params.text : '',
});

export default AnotherParamScreen;