将屏幕定义的函数传递到标题触发“不可序列化”问题

Question

我有一个堆栈导航器，在其中一个屏幕中，我定义了全局标题栏以包含一个将触发模式的按钮。我遇到的问题是，我正在定义从屏幕组件本身触发所述模态的函数，并尝试通过

navigation.setParams

传递该函数，而我面临警告：

在导航状态中发现不可序列化的值

const ViewB = ({ route, navigation }) => {
  const [showModal, setShowModal] = useState(false);

  useEffect(() => {
    navigation.setParams({showModal: () => setShowModal(true)});
  }, []);

<Stack.Screen name="ViewB" component={ViewB} options={({ route }) => ({
  headerRight: () => (
      <View>
          <Button onPress={() => {
              showModal = route?.params?.["showModal"];
              showModal && showModal();
          }} title="Toggle modal" />
      </View>
  )
})} />

谷歌搜索后，我确实遇到了关于这个问题的官方文档，还有这个SO问题/答案，它解释了RN不喜欢我们将函数传递给

navigation

，因为如果事情发生，它可能会破坏功能改变等等......但是我不确定有更好的方法来解决这个问题。

有没有一种方法可以在不影响react-native的情况下达到我想要的结果？

这是我的示例的堆栈

Answer 1

是的，react-navigation不允许我们传递navigationprops中的方法。

根据您的要求，无需将参数中的方法传递给父级。

您可以通过在屏幕代码中添加 headerRight 来实现此目的，请检查以下代码更改以更好地理解。

const ViewB = ({route, navigation}) => {
  const [showModal, setShowModal] = useState(false);

  useLayoutEffect(() => {
    navigation.setOptions({
      headerRight: () => (
        <View>
          <Button
            onPress={() => {
              setShowModal(true);
            }}
            title="Toggle modal"
          />
        </View>
      ),
    });
  }, [navigation]);

  const onBackPress = () => {
    navigation.navigate(route.params.previousScreen, {
      val: 5,
      val2: 6,
    });
  };

  return (
    <View>
      <Text>ViewB</Text>
      <Text>Params: {JSON.stringify(route.params)}</Text>
      <Button title="back" onPress={onBackPress} />
      {showModal && <Modal onClose={() => setShowModal(false)} />}
    </View>
  );
};

export default function App() {
  return (
    <NavigationContainer>
      <Stack.Navigator mode="modal">
        <Stack.Screen name="ViewA" component={ViewA} />
        <Stack.Screen name="ViewB" component={ViewB} />
      </Stack.Navigator>
    </NavigationContainer>
  );
}