stacknavigator反应顶部菜单的本机设置标题

时间:2020-10-07 11:47:50

标签: react-native navigation stack-navigator

我有一个这样创建的菜单:

Locale currentLocale = Locale.getDefault();
System.out.println(currentLocale.getDisplayLanguage());
System.out.println(currentLocale.getDisplayCountry());

System.out.println(currentLocale.getLanguage());
System.out.println(currentLocale.getCountry());

System.out.println(System.getProperty("user.country"));
System.out.println(System.getProperty("user.language"));

使用StackNavTitle:

import {createStackNavigator} from 'react-navigation';

   const stackNav = createStackNavigator({
    Main: {
   screen: JourneeService,
    navigationOptions: ({navigation}) => ({
     headerTitle: <StackNavTitle title="Journée de Service " />,
      headerStyle: {
    backgroundColor: '#0088CE',
     },
    headerTintColor: '#fff',
    headerTitleStyle: {
       fontWeight: 'bold',
    },

    headerLeft: (
    <TouchableOpacity
      onPress={() => navigation.openDrawer()}
      style={{width: '150%'}}>
      <Icon name="ios-menu" size={35} color="#fff" style={{padding: 10}} />
    </TouchableOpacity>
  ),
}),
 }

在代码上我通过回调检索标题,我想动态设置标题,我该怎么做?

提前感谢您的答复

1 个答案:

答案 0 :(得分:0)

您可以为标题提供一个函数,该函数根据文档接受三个参数,其中一个包含动态标题。这是我从文档中获取的示例,并使用您的标头组件进行更新

import {createStackNavigator} from 'react-navigation';

   const stackNav = createStackNavigator({
    Main: {
   screen: JourneeService,
    navigationOptions: ({navigation}) => ({
     headerTitle: ({allowFontScaling, style, children})=> <StackNavTitle title={children.title} />,
      headerStyle: {
    backgroundColor: '#0088CE',
     },
    headerTintColor: '#fff',
    headerTitleStyle: {
       fontWeight: 'bold',
    },

    headerLeft: (
    <TouchableOpacity
      onPress={() => navigation.openDrawer()}
      style={{width: '150%'}}>
      <Icon name="ios-menu" size={35} color="#fff" style={{padding: 10}} />
    </TouchableOpacity>
  ),
}),
 }

您可以在这里https://reactnavigation.org/docs/4.x/stack-navigator#headertitle

找到更多信息