最近我开始使用React Native 0.61.5
和React navigation 5.x
.现在我需要将父函数传递到子屏幕.例如,我想通过按StackNavigator中嵌套的TabNavigator选项卡中的按钮来更改导航栏图标.以前(navigation ver.3.x)我使用getActiveChildNavigationOptions
来满足我的需求,但现在它被删除了.因此,实现这一目标的唯一方法是将自定义函数传递给子组件.
在示例代码中,我想将XXXXXXXX
改为YYYYYYYYY
:
const TabA = ({ route }) => (
<View>
<Text>Tab A</Text>
<Button
title="Change header"
onPress={() => route.params.setHeaderRightName("YYYYYYYYY")}/>
</View>
)
const TabB = () => <><Text>Tab B</Text></>
const Tabs = createBottomTabNavigator();
const TabsNavigator = ({ navigation }) => {
const [headerRightName, setHeaderRightName] = useState("XXXXXXXX");
useLayoutEffect(() => navigation.setOptions({
headerRight: () => <MyNavIcon name={headerRightName}/>
}), [headerRightName]);
return (
<Tabs.Navigator>
<Tabs.Screen name="tab-a" component={TabA} initialParams={{ setHeaderRightName }} />
<Tabs.Screen name="tab-b" component={TabB} />
</Tabs.Navigator>
);
}
const Stack = createStackNavigator();
export default App = () => (
<NavigationContainer>
<Stack.Navigator>
<Stack.Screen name="tabs" component={TabsNavigator} />
<Stack.Screen name="another-screen" component={AnotherScreen} />
</Stack.Navigator>
</NavigationContainer>
)
一切正常,但我收到了以下警告:
全文:
Non-serializable values were found in the navigation state, which can break usage such as persisting and restoring state. This might happen if you passed non-serializable values such as function, class instances etc. in params. If you need to use components with callbacks in your options, you can use 'navigation.setOptions' instead. See https://reactnavigation.org/docs/troubleshooting#i-get-the-warning-non-serializable-values-were-found-in-the-navigation-state for more details.
So how can I pass function from parent to child if warning says I cannot pass function using route params?