An old dog learns code

StackNavigator Header增加“返回”按钮

September 26, 2017


StackNavigator 自带了 navigationOptions 属性,但必须以静态对象申明

实现有 3 个要点:

  1. navigationOptions 对象里,创建{param}常量,然后 headerLeft 或者 headerRight 里配置好闭包函数
    这样做是因为 navigation 是类的实例成员,无法通过类成员访问,所以需要用闭包绕开这一限制
  2. 在 DidMount 事件中配置 params 的闭包函数对象
  3. 页面跳转的执行函数
static navigationOptions = ({navigation}) => ({
      const {params} = navigation.state;
      title: 'PlayGround',
      headerRight: <View />,//之前提到过,占位的用的空view
      headerLeft:        <Button onPress={params.handleNavigation && params.handleNavigation()} />,      headerStyle: {
        backgroundColor: 'white',
      },
      headerTitleStyle: {
        textAlign: "center",
        alignSelf: "center",
        fontSize: 16,
      }
  });
  //页面跳转执行函数  toOtherScreen(){    this.props.navigation.navigate('pageDest');  }
  componentDidMount(){
    this.navigation.setParams(
      handleNavigation: ()=>{this.toOtherScreen()}
    )
  }