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.
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>
);
}
}
Cela marche:
static navigationOptions = ({ navigation }: NavigationScreenProps) => ({
...
})
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.
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 { .... }
public static navigationOptions: NavigationScreenConfig<NavigationStackScreenOptions> =
({navigation}) => ({/* Your options... */})
Cela semble fonctionner:
public static navigationOptions: NavigationScreenOptionsGetter<
NavigationScreenOptions
> = (navigation, stateProps) => ({
title: navigation.state.params.someValue,
});