通过道具反应原生传递函数

Question

我是本机反应的新手，我在将函数从父类传递到子类时遇到了一些问题

//Child class
const AppDrawer = ({update_recent}) => {
     update_recent("Notification");
}

//Parent class
const App: () => React$Node = () => {    
    const [recent, setRecent] = useState("Home");

    useLayoutEffect(() => {
       SplashScreen.hide();
    });

    return (
       <NavigationContainer>
          <Stack.Navigator screenOptions={{
            headerShown: false
          }}>
        <Stack.Screen name="Application" component={AppDrawer} update_recent={setRecent}/> //Pass in set recent function to child class.
        <Stack.Screen name="Notifications" component={Notifications} recent_page={recent}/>
      </Stack.Navigator>
    </NavigationContainer>
  );
};

export default App;

我将 setRecent 传递给 AppDrawer，以便 AppDrawer 类能够编辑 recent 变量。请告诉我该怎么做。

Answer 1

你可以试试

  <Stack.Screen name="Application" component={()=><AppDrawer update_recent={setRecent}/>}/> //Pass in set recent function to child class.

在组件中，而不是直接传递 AppDrawer，您可以传递一个返回 AppDrawer 组件的箭头函数，同时将 setRecent 作为道具 update_recent 传递。

---

更新

为屏幕使用渲染回调而不是指定组件道具：

  <Stack.Screen name="Application" component={(props)=><AppDrawer {..props} update_recent={setRecent}/>}/> //Pass in set recent function to child class.

见https://reactnavigation.org/docs/hello-react-navigation/#passing-additional-props