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>
  );
}

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

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

1 个答案: