Question

我刚刚更新为响应本机导航版本5。现在，我尝试通过goBack（）调用将数据发送回上一个屏幕。

我用

推送下一个视图

const onSelectCountry = item => {
    console.log(item);
};

navigation.navigate('SelectionScreen', {
        onSelect: onSelectCountry});

并通过调用从FlatList中选择项目后进行回退：

function onSelectedItem(item) {
    route.params.onSelect(item);
    navigation.goBack();
}

但是通过使用params发送函数，我得到一个警告：在导航状态下发现了不可序列化的值...

有人可以告诉我正确的方法吗？

Answer 1

导航将数据发送到屏幕。

onPress={() => {
          // Pass params back to home screen
          navigation.navigate('Home', { post: postText });

遵循官方文档React Native

Answer 2

这是一个实现

scereen A

const Screen1 = ({navigation, route}) => {
  const [item, setItem] = useState(null);

  useEffect(() => {
    navigation.addListener('focus', () => {
      console.log(route.params)
    })
  }, [])  

  const onPress = () => {
    navigation.navigate('Screen2', {onReturn: (item) => {
      setItem(item)
    }})
  }
  return (
    // Components
  )
}

Screen2：

const Screen2 = ({navigation, route}) => {

  useEffect(() => {
    navigation.addListener('focus', () => {
      console.log(route.params)
    })
  }, [])  

  // back Press
  const onPress = () => {
    route.params.onReturn(item);
    navigation.goBack()
  }

  return (
    // Components
  )
}

Answer 3

我访问了这篇文章，因为我想在 2 个堆栈中使用相同的公共组件。如何知道如何返回并传递参数？

我通过首先传递一个参数来解决它，该参数将标识从哪里访问组件。然后，我没有使用不接受参数的 goBack()，而是导航到上一个路由并传递参数。

//in Stack1
navigation.navigate('commonComponent', isStack1: true)

//in Stack2
navigation.navigate('commonComponent', isStack1: false)

//in CommonComponent, instead of goback(), use navivation.navigate

function CommonComponent({ navigation, route }) {
  const {isStack1} = route.params
  const customRoute = isStack1 ? 'routeNameInStack1' : 'routeNameInStack2'
  return (
    <Button title="Go back" onPress={() => navigation.navigate('customRoute', {myParams: 'blabla...') />
  )
}

如何在React Native Navigation v5中将数据传递回上一屏幕？

3 个答案: