React Navigation 配置标题栏

设置header title

Screen 组件接受options 属性，它要么是一个对象，要么是一个返回对象的函数，该对象包含各种配置选项。我们用于标题标题的是title，如下例所示。

function StackScreen() {
  return (
    
      
    
  );
}

在title中使用params

为了在标题中使用参数，我们需要为屏幕设置一个返回配置对象的函数。

function StackScreen() {
  return (
    
      
       ({ title: route.params.name })}
      />
    
  );
}

使用setoptions更新options

 navigation.setOptions({ title: 'Updated!' })}
/>

调整header样式

• headerStyle: header的颜色
• headerTintColor: 后退按钮和标题都使用这个属性作为它们的颜色
• headerTitleStyle: 如果我们想自定义标题的fontFamily, fontWeight和其他文本样式属性，我们可以使用这个来实现

function StackScreen() {
  return (
    
      
    
  );
}

图片.png

跨屏幕共享通用选项

如果希望在多个屏幕上以类似的方式配置头部信息，可以这样写

function StackScreen() {
  return (
    
      
    
  );
}

用自定义组件代替标题

function LogoTitle() {
  return (
    
  );
}

function StackScreen() {
  return (
    
        }}
      />
    
  );
}