How do I use React Navigation to send parameters to another screen without moving there?-CodePudding

I know that you can do navigation.navigate("address", {"your params here"} to send parameters over to another screen. But then you have to navigate there. Is there a way of sending params over without navigating?

I have a application with multiple screens. And I want to update a useState from another component by updating its params so that a button appears. But I dont want to navigate there, I just want to update it so when the user does go there the button will be there.

Like this:


const currentComponent = (navigation) {
return (
  <Button onPress={navigation.updateParams("otherComponent", {shouldShowValue: true})} />
  )
}




const otherComponent = (route, navigation) {
 const {shouldShowValue} = route.params

 const [shouldShow, setShouldShow] = useState(shouldShowValue);

 return (
  {shouldShow ? <Button> Yayy this button appears now <Button /> : null}
  )
 }
}

'''

this is just pseudo code and not at all 
like the code I have written, 
but its just meant as an example to get a 
understanding of what I mean.

(updateParams) isnt a function that exists, 
but I want something similiar like it. 
Is there a way of updating the params in a 
component from another component without having 
to navigate there? Like with 
navigate.navigate("address" {params go here}) 
but without the navigation part?

CodePudding user response：

You can consider using useContext() hook to execute your functionality. Using navigation library to pass param without navigating to that page is somehow misusing the navigation function.

With useContext, you can share the state(s) among components. If you want to change the value upon clicking action, you can also pass the useState hook into useContext. Alternatively, you can consider to use redux library to share state.

import { useState, createContext, useContext } from 'react';

const shareContext = createContext(null);

export default function demoUseContext() {
    const [isClicked, setClicked] = useState(false);
    return (
      <shareContext.Provider value={{isClicked, setClicked}}>
        <ComponentA />
        <ComponentB />
      </shareContext.Provider>
    )
  }
  
  function ComponentA() {
    const sharedParam = useContext(shareContext);
    return (
        <button onClick={() => sharedParam.setClicked(!sharedParam.isClicked)}>
            click to change value
        </button>
    );
  }
  
  function ComponentB() {
    const sharedParam = useContext(shareContext);
    return (
        sharedParam.isClicked && <div>it is clicked</div>
    )
  }

As the example above, the code pass the useState hook from parent component into context, where A is consuming the useState from context to setup isClicked via setClicked, B is consuming the value isClicked from context.

You can also manage to setup context with value not only in a hook, but a param / object / function as a callback.

For more details, please refer to https://reactjs.org/docs/hooks-reference.html#usecontext There're multiple hooks including useContext fyi

CodePudding user response：

Passing parameters to routes There are two pieces to this:

Pass params to a route by putting them in an object as a second parameter to the navigation.navigate function: navigation.navigate('RouteName', { /* params go here */ })

Read the params in your screen component: route.params.

We recommend that the params you pass are JSON-serializable. That way, you'll be able to use state persistence and your screen components will have the right contract for implementing deep linking.