React Native - 如何将函数传递到导航器中的堆栈屏幕？

Question

我有这个导航器，在模态框内有不同的屏幕。要关闭模式，需要按下按钮来激活 setState 功能。现在的问题是关闭整个模式的按钮位于堆栈屏幕之一内。请我如何将功能作为道具从父级传递到屏幕。以下是我的代码的摘要。谢谢。

//Parent.js

    const [state, setState] = useState(false)
            <Stack.Navigator
                initialRouteName="Screen1"
                screenOptions={{
                    headerShown: false
                }}
             setState={setState}
            >
                <Stack.Screen name="Screen1" component={Screen1} />
                <Stack.Screen name="Screen2" component={Screen2} />
            </Stack.Navigator>

//Screen1.js

export default Screen1 = ({setState})=>{
  return (
   <View>
      <Button title={Press me} onPress={()=>{
        setState(false)}} />
   </view>
   )
}

Answer 1

您可以将其作为初始参数传递，如下所示

  <Stack.Screen
    name="Home"
    component={HomeScreen}
    initialParams={{ setState: setState }}
  />

然后像下面这样访问它

function HomeScreen({ navigation, route }) {
  return (
    <View style={{ flex: 1, alignItems: 'center', justifyContent: 'center' }}>
      <Button
        title="setState"
        onPress={() => route.params.setState(false)}
      />
    </View>
  );
}

但对于复杂的场景，最好考虑基于上下文的实现。