Question

希望没关系。

我无法理解它应该如何工作的自定义标头。我只想根据选择的路由向我的Header发送静态属性。

我有：

export default AppNavigator = StackNavigator({
    Index:{
        screen: BottomNavigator,
    }
  },{
    navigationOptions: {
        header: AppHeader,
    },
    headerMode:'float',
  })

我的BottomNavigator是：

const BottomNavigator = TabNavigator({
    TabMenu1: { 
        screen: () => <Text> Resumé </Text>,
        navigationOptions: {
            title: 'Resumé'
        }
    },
    TabMenu2: {
        screen: () => <Text> Sells </Text>,
        navigationOptions: {
            title: 'Sells'
        }
    },
},{
    tabBarComponent: BottomNavigation
});

我期待自定义标题中的 {props.title} ，是吗？

其他信息：我的完整路线堆栈是：

AuthNavigator 有一个连接到redux的包装器并具有：

const AuthNavigator = StackNavigator({
  SignedIn: { 
    screen: MainNavigator
  }
 },{  
    headerMode:'none',
    initialRouteName: 'SignedIn'
  });

MainNavigator：

const MainNavigator = StackNavigator({
    Drawer: { 
        screen: DrawerNav
    },
  }, {  
    headerMode:'none',
  });

DrawerNav：

const DrawerNav = DrawerNavigator({
    Menu1: {
        screen: AppNavigator
    },
}, {
    contentComponent: DrawerNavigation,
    drawerWidth: 300
});

AppNavigator 和 BottomNavigator 如上所述

Answer 1

您可以像这样指定标题：

    RouteName:
    {
        screen: RouteScreen,
        navigationOptions: ({navigation}) => ({
            title: navigation.state.params.title || 'StaticTitle'
        })
    }

其中navigation.state.params.title是您在导航时作为参数发送的标题（因此，如果您想为示例添加变量）。如果您只想使用静态标题，请使用title: 'StaticTitle'

Answer 2

对于React Navigation 5可行

props.scene.descriptor.options.title

Answer 3

export const Navigator = StackNavigator(routes, {
  headerMode: 'screen',
  navigationOptions: ({ navigation }) => ({
    header: props => <Header {...props} />,
  }),
})

我确实找到了解决方法，但是对于一个常见的用例来说，它似乎很冗长。

// Header.js
...
render() {
  const { getScreenDetails, scene } = this.props
  const details = getScreenDetails(scene)
  return (
    <View>
      <Text>{details.options.title}</Text>
    <View>
  )

Answer 4

已解决，并提取了反应导航的Header.js文件代码：

在自定义标题中获取标题的正确方法是：

const sceneOptions = props.getScreenDetails(props.scene).options;
const sceneTitle = sceneOptions.title;

全部谢谢！

如何在自定义标题组件中获取屏幕标题？

其他信息：我的完整路线堆栈是：

4 个答案: