React-native 根据从嵌套抽屉导航中选择的内容更改堆栈导航器标题

Question

我有一个像这样嵌套在堆栈导航器中的抽屉导航器

const DrawerNavigation = DrawerNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      drawerLabel: 'Home',
      drawerIcon: () => (
        <MaterialCommunityIcons name={'home'} size={25} />
        )
    },
  },
  Customers: {
    screen: Customers,
    navigationOptions: {
      drawerLabel: 'Customers',
      drawerIcon: () => (
        <MaterialCommunityIcons name={'account-switch'} size={25} />
        )
    },
  },
}, {
  drawerPosition: 'right',
})

const Navigation = StackNavigator({
  Home: {
    screen : DrawerNavigation,
    navigationOptions: ({ navigation }) => ({
      title: navigation.state.routeName, // Always 'Home'
    }),
  },
})

这给了我想要的布局，"title bar" 显示在 IOS 和 android 上，并使抽屉导航成为导航应用程序的主要方法。但是，我希望堆栈导航器的 title 道具显示从抽屉导航器中选择的任何屏幕的名称，而不是静态字符串。这在当前设置下可能吗？也许这是不正确的方法 - 我是 react-native 导航的新手。

Answer 1

您可以在每个屏幕的导航选项中为每个屏幕添加标题。

const DrawerNavigation = DrawerNavigator({
  Home: {
    screen: Home,
    navigationOptions: {
      drawerLabel: 'Home',
      title: 'Home, sweet home!' // <=== add this
      drawerIcon: () => (
        <MaterialCommunityIcons name={'home'} size={25} />
        )
    },
  },
  Customers: {
    screen: Customers,
    navigationOptions: {
      drawerLabel: 'Customers',
      title: 'Dear customers', // <=== and this
      drawerIcon: () => (
        <MaterialCommunityIcons name={'account-switch'} size={25} />
        )
    },
  },
}, {
  drawerPosition: 'right',
})

const Navigation = StackNavigator({
  Home: {
    screen : DrawerNavigation,
    navigationOptions: ({ navigation }) => ({
      title: navigation.state.routeName, // <=== remove this
    }),
  },
})

此外，您还可以在每个屏幕组件上设置标题，更多详细信息here

React-native 根据从嵌套抽屉导航中选择的内容更改堆栈导航器标题

React-native change stack navigator title based on what is selected from nested drawer navigation

reactjs

react-native

react-navigation