반응 내비게이션 소품에 강한 타이핑 추가

Question

내 반응 네이티브 프로젝트 (엑스포)에서 타이프 스크립트를 사용하고 있습니다.

프로젝트는 반응 네비게이션을 사용하므로 내 화면에서 navigationOptions을 설정할 수 있으며 navigation 소품에 액세스 할 수 있습니다.

이제 강력하게 입력하려고 했으므로 설정할 수있는 속성에 대한 힌트를 얻습니다.

interface NavStateParams { 
    someValue: string 
} 

interface Props extends NavigationScreenProps<NavStateParams> { 
    color: string 
} 

class Screen extends React.Component<Props, any> { 
    // This works fine 
    static navigationOptions: NavigationStackScreenOptions = { 
     title: 'ScreenTitle' 
    } 
    // Does not work 
    static navigationOptions: NavigationStackScreenOptions = ({navigation, screenProps }) => ({ 
     title: navigation.state.params.someValue 
    }) 
} 

반응 탐색을 구성 요소의 소품으로 처리하는 가장 좋은 방법은 무엇입니까?

Answer 1

나는 같은 문제를 가지고 있고, 여기 내 솔루션입니다 : 당신은이 전 세계적으로 작동하도록 일부 d.ts 파일에 NavigationOptionsFn<TParams> 타입을 선언 할 수 있습니다

import * as React from 'react' 
import { NavigationScreenProps, NavigationStackScreenOptions } from 'react-navigation' 

interface NavStateParams { 
    someValue: string 
} 

// tslint:disable-next-line:no-any 
type NavigationOptionsFn<TParams=any> = (props: NavigationScreenProps<TParams>) => NavigationStackScreenOptions 

class Screen extends React.Component { 
    // This should works fine 
    static navigationOptions: NavigationOptionsFn<NavStateParams> = ({ navigation, screenProps }) => ({ 
    title: navigation.state.params.someValue 
    }) 
} 

은.

Answer 2

그냥 같이, 당신의 소품에 NavigationType을 추가

import { StackNavigator, NavigationScreenProp } from 'react-navigation'; 

    export interface HomeScreenProps { 
     navigation: NavigationScreenProp<any,any> 
    }; 

    export class HomeScreen extends React.Component<HomeScreenProps, object> { 

     render() { 
     return (
      <View style={styles.container}>  
      <Button 
       title="Go to Details" 
       onPress={() => this.props.navigation.navigate('Details')} 
      /> 
      </View> 
     ); 
     } 
    }