如何通过React-Native中的React-Navigation多次传递一个参数？

Question

function A() {
  const [levels, setLevels] = React.useState(null);

  // upon the component mount, we call the database.
  React.useEffect(() => {
    database()
      .ref()
      .once("value")
      .then((snapshot) => {
        //get Levels from db
        const levels = snapshot.map((child) => child.key);
        setLevels(levels);
      });
  }, []);

  return (
          <View>
            {levels.map((element) => {
              return <B level={element} />;
            })}
          </View>
  );
}

function B(props){    
    const navigation = useNavigation();
    return (
        <View>

        <TestButton
            title={props.level}
            onPress={() => navigation.navigate('C')}
        />

        </View>
    );
}

I currently am already passing the value 'level' to the TestFunc parameter, but now I wish to pass the same parameter to the screen I navigate to when I press the TestButton component.

https://reactnavigation.org/docs/params/

This documentation shows me how I would do such with a newly initialized parameter, but it doesn't seem to work with parameters that have been passed from previous screens.

Any suggestions?

EDIT: I have tried to make it a little bit clearer. I want to go from function A to B to C, all different components/screens in my app. I want to take the 'level' that I obtain from function A and pass it from B to C. Currently I am correctly retrieving the 'level' value in function B, however I can not seem to pass it to function C.

Answer 1

function TestFunc (props){    
const navigation = useNavigation();
return (
    <View>

    <TestButton
        title={props.level}
        onPress={() => navigation.navigate('Category',{...props})}
       //{...props} send all props that's exist in props argument 
    />

    </View>
  );
}

You can get the all props on Category component also

const { level } = this.props.navigation.state.params;