如何在React-Native上的自定义navigationOptions中传递this.state值

时间:2018-04-26 17:29:40

标签: react-native react-native-navigation

我是React-Native的新手,我试图找出使用React-Native Navigation如何在我的自定义标头中传递值

这是我的组件A与CustomHeader

的相似之处
constructor(props) {
    super(props);       
    this.state = {
      sortId: 4
    }
 }

componentDidMount() {
    this.props.navigation.setParams({
      sortId: this.state.sortId
    })
}

static navigationOptions = {
    header: props =>    // Your custom header
      <CustomHeader
         sortId={props.navigation.params.sortId}
      />
};

在我的CustomHeader组件中,当我尝试显示这样的值时

export default class CustomHeader extends Component {

  constructor(props) {
   super(props);
  }

 componentWillMount() {
   Alert.alert(this.props.sortId.toString());
 }

它无效,我收到错误:undefined is not an object (evaluating 'this.props.sortId')

但是,当我对下面的值进行硬编码时,它确实可以正常工作

static navigationOptions = {
    header: props =>    // Your custom header
      <CustomHeader
         sortId={4} //this works
      />
};

知道如何传递参数吗?我错过了什么?我不了解如何向props添加参数并在navigationOptions中访问它们。

1 个答案:

答案 0 :(得分:4)

如果您需要访问params的{​​{1}},则需要将代码更改为

navigationOptions

如上所述here