React Navigation：navigationOptions中scene如何获取？自定义返回按钮按需隐藏疑问

嘿，刚好我之前也遇到过类似的需求，给你两个实用的解决方案，顺便聊聊你问的scene对象怎么获取：

一、最简单的方式：用navigation.canGoBack()判断 #

其实不用纠结scene对象，React Navigation的navigation对象本身就提供了canGoBack()方法，它会自动帮你判断当前导航栈里是否存在可以返回的上一页，用这个来控制返回按钮的显示/隐藏最靠谱：

static navigationOptions = ({ navigation }) => {
  // 判断是否能返回
  const shouldShowBackButton = navigation.canGoBack();

  return {
    title: '你的页面标题',
    headerStyle: { backgroundColor: '#fff' }, // 示例样式
    headerTitleStyle: { fontSize: 18 }, // 示例样式
    // 能返回就渲染自定义按钮，否则返回null隐藏
    headerLeft: shouldShowBackButton ? <BackButton onPress={() => navigation.goBack()}/> : null,
  };
};

二、获取scene对象的方法（满足你的好奇心） #

如果你确实需要用到scene对象里的索引信息，其实它就在navigationOptions的参数里，直接解构出来就行：

static navigationOptions = ({ navigation, scene }) => {
  // 通过scene.index判断是否是栈中的第一个页面
  const shouldShowBackButton = scene.index !== 0;

  return {
    title: '你的页面标题',
    headerStyle: { ... },
    headerTitleStyle: { ... },
    headerLeft: shouldShowBackButton ? <BackButton onPress={() => navigation.goBack()}/> : null,
  };
};

scene对象里包含了当前页面在导航栈中的位置信息（scene.index）、路由信息（scene.route）等，不过还是更推荐用canGoBack()，因为它会考虑到一些特殊情况（比如某些页面被设置为无法返回），判断逻辑更严谨。

内容的提问来源于stack exchange，提问作者nicholas