使用 React Navigation 传递的参数中的奇怪行为

Question

屏幕如下：

import React from 'react';
import { View, StyleSheet, Image, TouchableOpacity, Text } from 'react-native';
import { NavigationActions } from 'react-navigation'

export default class ContentScreen extends React.Component {    
  render() {
    const { state } = this.props.navigation;
    const { code } = state.params.code
    return(
      <Text>CONTENT GOES HERE: {JSON.stringify(state)} / '{code}'</Text>
    )
  }
}

以及导航调用：

<TouchableOpacity key={k} onPress={() => {navigate("Content", {code: k})}} style={styles.listing}>

下面是显示的内容：

CONTENT GOES HERE: {"params":{"code":"222"},"key":"id-151010...","routeName":"Content"} / ''

这真的是@(#$ 很奇怪。该值显然存在于 state.params.code，从 JSON 字符串可以看出，但是当访问时，它不存在。Object.values(state.params) 和 Object.keys(state.params) 给出了预期的结果（["code"] 和 ["222"]）。

那么，关于正在发生的事情有什么想法吗？或者关于如何进一步调查的想法？

Answer 1

看起来你解构的层次太深了。

const { code } = state.params.code;

这基本上就是找this.props.state.params.code.code

尝试：

Const { code } = state.params;

或者：

const { navigation: { state: { params: { code } } } } = this.props;

使用 React Navigation 传递的参数中的奇怪行为

Odd behavior in passed params with React Navigation

react-native

react-navigation