Question

基于the docs的React Navigation，这应该是可行的！但是我试图找出设置中的问题。

每当我尝试通过导航选项传递道具时，子组件都看不到它。

我的代码：

import AddAlarm from '../components/AddAlarm';

export default class AlarmsScreen extends React.Component {

  static navigationOptions = {
    headerTitle: 'Alarms',
    headerLeft: <EditAlarms />,
    headerRight: (
      <AddAlarm propsTest="value" />
    ),
  };

  // ...

}

在组件中：

export default class AddAlarm extends React.Component {

    handleAlarmAdd() {
        console.log( this.props.propsTest );
    }

    // ...

}

这引发了一个错误，即找不到所需的道具。我什至尝试只记录props对象本身，却得到“未定义”。

我正在使用Expo并在iOS模拟器中运行它。在正常情况下传递的道具（通过render（）的返回）可以正常工作。

Answer 1

您是否验证了this中handleAlarmAdd的值？您可能需要写handleAlarmAdd = () => {...}

Answer 2

您的片段代码似乎正确。我想检查一下您如何调用handleAlarmAdd函数，因为如果您不想将其声明为箭头函数或将其绑定到构造函数中，则必须像以下示例一样调用它：onPress={() =>{this.handleAlarmAdd()}}。

Answer 3

可以使用
传递导航属性 this.props.navigation.navigate（'ScreenName'，{propsTest：“ Test”}））;

在导航屏幕的构造函数中，请使用 props.navigation.state.propsTest

无法通过NavigationOptions将道具传递给组件？

3 个答案: