react-navigation如何动态渲染headerRight文本以及调用实例的方法

最近写react-native， 要实现一个多选的功能，导航栏用的是react-navigation，在选择状态时，导航栏右侧文本要为’选择’，反之为’管理’，点击管理则进入选择状态

static navigationOptions = ({ navigation }) => {
    return {
      headerTitle: '阅读历史',
      headerTintColor: '#222',
      headerRight: <Text 
     				 style={ styles.textManager } 
      				 onPress={ navigation.getParam('handleManager') }
      				>
      					{ navigation.getParam('isInSelect') ? '选择' : '管理' }
      				</Text>
    };
  };

因为这里是static静态方法，所以在 navigationOptions 中 this 并不是指向实例，如果想要调用实例的方法，react-navigation提供了navigation.setParam 和 navigation.getParam 解决这个问题；

具体实现如下

在componentDidMount 生命周期方法中调用 this.props.navigation.setParams 方法

  constructor(props) {
    super(props);
    this.state = {
      isInSelect: false,  // 当前是否是选择状态
    };
    this.handleManager = this.handleManager.bind(this);
  }
  componentDidMount() { 
    this.props.navigation.setParams({ isInSelect: this.state.isInSelect });	
    this.props.navigation.setParams({ handleManager: this.handleManager });
  }

这样就可以通过 navigation.getParam(‘handleManager’) 去调用实例的 handleManager 方法;

更新右侧按钮文本

在handleManager方法中改变 isInSelect 的值，改变完后需要调用setParams方法，否则导航栏不会重新渲染，文本也就不会更新

 handleManager() {
    this.setState(preState => ({
        isInSelect: !preState.isInSelect,
      }), () => {
      	this.props.navigation.setParams({ isInSelect: this.state.isInSelect });
    });
  }

o 了~