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>
);
}
我目前已经将值'level'传递给TestFunc参数,但现在我希望在按下TestButton组件时将相同的参数传递给我导航到的屏幕。
https://reactnavigation.org/docs/params/
这篇文档向我展示了如何使用新初始化的参数,但它似乎不适用于从以前的屏幕传递的参数。
有什么建议吗?
编辑:我试着把它说得更清楚一点。我想从功能A到功能B再到功能C,所有不同的组件/屏幕都在我的应用程序中。我想取我从函数A获得的"level",并将其从B传递给C。目前,我正在正确检索函数B中的"level"值,但我似乎无法将其传递给函数C。
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>
);
}
你可以获得类别组件上的所有道具也
const { level } = this.props.navigation.state.params;