web-dev-qa-db-fra.com

Ajouter une frappe forte pour les accessoires de navigation de réaction

J'utilise TypeScript dans mon projet react-native (expo).

Le projet utilise react-navigation, donc sur mes écrans, je peux définir navigationOptions et j'ai accès à la prop navigation.

Maintenant, j'essaie de les taper avec force pour obtenir des indications sur les propriétés disponibles.

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
    })
}

Quel serait le meilleur moyen de gérer la navigation par réaction comme un accessoire pour les composants.

typescriptreact-nativereact-navigation
17
Mellet

Ajoutez simplement NavigationType à vos accessoires, comme ceci:

    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>
        );
      }
    }
12
Andrej Kyselica

Cela marche:

static navigationOptions = ({ navigation }: NavigationScreenProps) => ({
  ...
})
3
J. Hesters

J'ai le même problème, et voici ma solution:

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
  })
}

Vous voudrez peut-être déclarer le type NavigationOptionsFn<TParams> dans un fichier d.ts pour le faire fonctionner globalement.

3
Adiono
 yarn add --dev @types/jest @types/react-navigation

import { NavigationScreenProps } from "react-navigation";

export interface ISignInProps extends NavigationScreenProps<{}> { userStore: IUserStore }

export class SignInScreen extends React.Component { .... }
0
Javier González
public static navigationOptions: NavigationScreenConfig<NavigationStackScreenOptions> = 
    ({navigation}) => ({/* Your options... */})
0
Iwaz

Cela semble fonctionner:

public static navigationOptions: NavigationScreenOptionsGetter<
  NavigationScreenOptions
> = (navigation, stateProps) => ({
  title: navigation.state.params.someValue,
});
0
Simon Reggiani