我如何在本机反应中检查 navigationOptions 内的条件

Question

我想设置一个自定义导航 headerLeft 属性；只有在满足条件时我才能设置 headerLeft 属性。否则不。我在我的应用程序中使用 StackNavigator。并且也无法从导航选项中访问道具。

这是我的代码

componentDidMount() {
 this.props.navigation.setParams({goBack: this.goBack, shouldShow: this.state.show });
}


onShow = () => {
  if (this.state.steps >1) {
    this.setState({show:true}, () => {this.props.navigation.setParam({shouldShow:true})} )
  }
}
goBack= () =>{
 this.setState({ steps: this.state.steps - 1 })
}


static navigationOptions = ({ navigation }) => {
  const { params = {} } = navigation.state;
  let headerLeft = null;
  if (params.shouldShow) {
    headerLeft = <TouchableOpacity onPress={() => params.goBack}>
      <Image source={/* src */} style={Styles.navBarIcon} />
    </TouchableOpacity>
  }

  return {
    headerLeft: headerLeft,
    headerTitle: 'Register',
    headerStyle: Styles.navBar,
  };
};

Answer 1

由于导航选项是静态的并且不包含在您的类中，因此您不能简单地访问其中的状态。但是你可以按照下面的方法。

// ------ inside your class -------

static navigationOptions = ({ navigation }) => {
    const { params = {} } = navigation.state;
    let headerLeft = null;
    if(params.shouldShow) {
    headerLeft = <TouchableOpacity onPress={() => params.onPressButton()}>
                     <Image source={/* source */} style={Styles.navBarIcon} />
                  </TouchableOpacity>
    }

    return {
        headerLeft: headerLeft
    };
};

componentDidMount(){
    this.props.navigation.setParams({ onPressButton: this.onButtonPressedEvent, shouldShow:this.state.show });
}

onButtonPressedEvent = () =>{
// What you want to do when button pressed.
}

onShow = () =>{
   if(this.state.count > 1){
       this.setState({show:true}, () => {this.props.navigation.setParam({shouldShow:true})} )
   }
}

记得在更改计数时调用 onShow 方法来更改导航。