Quiero saber cuál es la mejor manera de configurar los parámetros y las opciones para reaccionar con la navegación nativa en un componente de clase. tenga en cuenta que los mismos parámetros se utilizan en las opciones. cuando puse todo el código en el constructor, obtuve parámetros undefined
debido a un problema de tiempo. y funciona. para mí en un caso cuando agregué la opción en componentDidMount
, escribiré algunos ejemplos en el código a continuación.
1- primer caso usando el componente de clase (está funcionando)
type Props = { navigation: NavigationProp<any>; route: RouteProps<{ Example: {title: string} }, 'Example'> } export default class Example extends Component <Props> { constructor(props: Props){ super(props) this.props.navigation.setParams({ title: 'title' }); } componentDidMount(){ this.props.navigation.setOptions({ title: this.props.route.params.title }) } ... }
2 - segundo caso usando FC: (no uso este ejemplo, pero creo que también es la mejor manera de hacerlo para FC).
export function Example: React.FC = () => { const navigation = useNavigation(); const route = useRoute(); useLayoutEffect(()=>{ navigation.setParams({ title: 'title' }); navigation.setOptions({ title: route.params.title }) }) ... }
así que espero que mi pregunta sea clara, ¿es esa la forma correcta de configurar las opciones de encabezado con la última navegación en React Native?
constructor es el primer paso en el ciclo de vida del componente , y está configurando parámetros dentro de eso, lo que significa que hay una propiedad que se actualizará. por lo que necesitamos una función que entienda cada actualización en un estado o accesorios recibidos, y ese oyente no es más que "componentDidUpdate(){}" 🤟:
import {NavigationProp, RouteProp} from '@react-navigation/native'; import React, {Component} from 'react'; import {Text, StyleSheet, View} from 'react-native'; type Props = { navigation: NavigationProp<any>; route: RouteProp<{Example: {title: string}}, 'Example'>; }; export default class Example extends Component<Props> { constructor(props: Props) { super(props); this.props.navigation.setParams({title: 'title'}); } componentDidUpdate() { this.props.navigation.setOptions({title: this.props.route.params.title}); } render() { return ( <View style={styles.container}> <Text style={styles.textStyle}>Use component did update :)</Text> </View> ); } } const styles = StyleSheet.create({ container: { padding: 30, }, textStyle: { color: 'black', fontSize: 20, fontWeight: 'bold', }, });