react-navigation header自定义的问题总结

[wuweijia]

react-navigation header自定义的问题总结

我没有实际运行过这段代码，是以前的一个总结，报错的话可以参考一下官网的自定义方式我只是说明了一些他没有讲到一些坑 https://reactnavigation.org/docs/intro/headers

headerStyle

我们在全局中设置了样式后

const ModalNavigator = StackNavigator(
 {
   Main: { screen: Main },
   Login: { screen: Login },
 },
 {
   headerMode: 'none',
   mode: 'modal',
   navigationOptions: {
     headerStyle: {
        height: 44,
        borderBottomWidth: 0,
     }
   },
 }
);

页面中想要覆盖某个样式

static navigationOptions = {
   headerStyle: {
        height: 64,
        borderBottomWidth: 0,
     }
}

这样是行不通的 无法覆盖

你需要用解构赋值的方式 (不懂的去看一下es6的解构赋值)

static navigationOptions = ({ navigation, navigationOptions }) => ({
    headerTitle: 'title',
    headerStyle: {
      ...navigationOptions.headerStyle,
      height: 100,
      borderBottomWidth: 10,
    },
    headerLeft: (
      <ReturnBtn
        onPress={() => navigation.goBack()}
      />
    ),
  });

[wuweijia]

怎么在自定义header 的 headerleft、headerright 中使用页面定义的类方法

例如你要使用 page 下面的 alert 方法

export default class Page extends Component {
  static navigationOptions = ({ navigation, navigationOptions }) => ({
    headerLeft: (
      <ReturnBtn
        onPress={() => this.alert()}
      />
    ),
  });

  alert() {
    alert('弹出')
  }
}

这样是行不通的 因为statci 下面是没有this的

解决办法是 通过参数传递的方式 将这个方法 作为一个参数 传递给navigation 首页在生命周期里设置参数 然后怎么取到它呢， 将上面的例子改为

export default class Page extends Component {
  static navigationOptions = ({ navigation, navigationOptions }) => ({
    headerLeft: (
      <ReturnBtn
        onPress={() => navigation.state.params.alert()}
      />
    ),
  });

 componentDidMount() {
   this.props.navigation.setParams({ alert: this.alert });
 }

  alert () => {
    alert('弹出')
  }
}