Estoy comenzando con React Native y me gustaría abrir un campo de búsqueda de entrada en una pantalla específica para filtrar algunos resultados que se muestran en esa pantalla usando el ícono de encabezado derecho (ícono de búsqueda).
Pude usar initialParams en Drawer.Screen y puedo console.log ese parámetro en la pantalla de resultados cuando se carga la pantalla. Simplemente no sé cómo pasar este parámetro nuevamente (como true ) cuando hago clic en el ícono del encabezado que ya está en la pantalla de resultados.
app.routes.tsx:
const Drawer = createDrawerNavigator(); export function AppRoutes() { const [openFilter, setOpenFilter] = useState(false); return( ... <Drawer.Screen name="Results" component={Home} initialParams={{ openFilter: openFilter }} options={{ headerRight: ({}) => ( <BorderlessButton onPress={() => { setOpenFilter(true); console.log(openFilter); }} > <Feather name="search" size={24} color={theme.colors.heading} style={{ marginRight: 15 }} /> </BorderlessButton> ), }} />; }Inicio.tsx:
export function Home({ route }: any) { const openFilter = route.params.openFilter; console.log(openFilter); const [filter, setFilter] = useState(false); // I would manage filter to be true return( ... {filter && <View style={{ marginBottom: 24, paddingHorizontal: 10 }}> <TextInput style={{ borderBottomColor: 'white', borderBottomWidth: 1 }} /> </View> } ... Creo que si convierto openFilter en true haciendo clic en el ícono del encabezado, puedo mostrar el texto de entrada. ¿Debo volver a renderizar la pantalla de resultados?
Encontré un método de navigation que estaba usando para administrar la navegación entre pantallas y puedo enviar cualquier parámetro con él:
const Drawer = createDrawerNavigator(); export function AppRoutes() { const navigation: any = useNavigation(); const [openFilter, setOpenFilter] = useState(false); return( ... <Drawer.Screen name="Results" component={Home} initialParams={{ openFilter: openFilter }} options={{ headerRight: ({}) => ( <BorderlessButton onPress={() => { navigation.setParams({ openFilter: openFilter}); // here is the method from navigation }} > <Feather name="search" size={24} color={theme.colors.heading} style={{ marginRight: 15 }} /> </BorderlessButton> ), }} />; } Y ahora puedo obtener openFilter o cualquier otro parámetro en la pantalla de inicio.