javascript - 我无法让我的应用程序使用组件文件中的 navigationOptions 而不是路线

Question

我定义了一个routes.js文件，其中创建了我的抽屉导航的所有路线。除了在一种情况下，这工作得很好。我有一个像这样的 StackNavigator:

const ChatScreens = createStackNavigator(
  {
    Chat: {
      screen: Chat,
    },
    Transactions: {
      screen: Transactions,
      navigationOptions: {
        headerLeft: (
          <MaterialIcons
            name="chat"
            size={24}
            style={{ color: colors.BLACK, marginLeft: 10 }}
            onPress={() => navigation.popToTop()} //not working
          />
        ),
      }
    },
    Logout: {
      screen: AuthLoadingScreen,
    },
  },
  {
    mode: 'card',
    initialRouteName: 'Chat',
    navigationOptions: {
      drawerIcon: getDrawerItemIcon('chat'),
    }
  },
);

如果删除此代码，将呈现一个默认的“< Back”箭头，该箭头可以正常工作。但是，我想使用该图标。我尝试在我的 Transactions.js 中添加所述 navigationOptions文件，但它们只是被忽略。它们生效的唯一方法是将其添加到我的 routes.js 中问题是，该文件中没有导航，所以，当然，我得到 Can't find variable: navigation错误。

我尝试将此行更改为 NavigationActions但如果我这样做 .navigate() 也不起作用或.back() 。事实上，我知道这个 navigationOptions 的最佳位置是在我的 Transactions 文件中，但我不明白为什么它在那里不起作用。

那么，您可以a)帮助我理解为什么它在Transactions.js 下不起作用，或者b)帮助我在这种情况下在我的routes.js 中进行导航吗？

仅供引用，在我的 routes.js 的底部我通过以下方式成功创建了 DrawerNavigation:

export default Drawer = createAppContainer(
  createDrawerNavigator({
    Chat:{
      screen: ChatScreens,
    },
    Info:{
      screen: InfoScreens,
    },
    User: {
      screen: UserScreens,
    },
    Feedback: {
      screen: FeedbackScreens,
      navigationOptions: {
        drawerLabel: <Hidden />
      }
    }
  },
  {
    initialRouteName: 'Chat',
    contentComponent: DrawerContent,
    contentOptions: {
      activeTintColor: colors.TURQUOISE,
      itemsContainerStyle: {
        marginVertical: 0,
      },
      iconContainerStyle: {
        opacity: 1
      }
    }
  })
);

Answer 1

如果你想在navigationOptions中使用navigation，则需要使用navigationOptions = ({ navigation, navigationOptions }) => {}之类的方法

例如，

class A extends Component {
  static navigationOptions = ({ navigation }) => {
    return {
        headerLeft: (
          <MaterialIcons
            name="chat"
            size={24}
            style={{ color: colors.BLACK, marginLeft: 10 }}
            onPress={() => navigation.popToTop()}
          />
        ),
      }
    };
  };

...

但是您尝试使用未定义的导航。

onPress={() => navigation.popToTop()} // navigation is not defined