React Navigation源代码阅读：views/Header/HeaderTitle.js

安迪源文

于 2018-05-16 11:21:05 发布

阅读量497

点赞数

CC 4.0 BY-SA版权

分类专栏： JavaScript React Navigation

本文链接：https://blog.youkuaiyun.com/andy_zhang2007/article/details/80334435

React Navigation 同时被 2 个专栏收录

49 篇文章

订阅专栏

JavaScript

38 篇文章

订阅专栏

本文介绍了一个React Native中用于自定义导航头标题组件的例子。该组件基于Animated.Text实现，并根据平台不同调整样式。开发人员可以通过navigationOptions.headerTitle来自定义头部标题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

import React from 'react';
import {Text, View, Platform, StyleSheet, Animated} from 'react-native';

const AnimatedText = Animated.Text;

/**
 * react-navigation 缺省的 HeaderTitle 实现,
 * 但是如果开发人员通过参数 navigationOptions.headerTitle 提供了自定义的 header title 实现，
 * 会使用开发人员所指定的那个，这个缺省的就不会被使用
 *
 * @param style 样式属性 style
 * @param rest 其他属性 props
 * @return {*}
 * @constructor
 */
const HeaderTitle = ({style, ...rest}) => (
    <AnimatedText
        numberOfLines={1}
        {...rest}
        style={[styles.title, style]}
        accessibilityTraits="header"
    />
);

const styles = StyleSheet.create({
    // 注意，这里定义了缺省头部标题文字的 大小，粗细，颜色，对齐方式，水平边距等，
    // 如果你不使用自定义 headerTitle 但是又想修改头部标题的样式，注意覆盖下面的
    // 缺省样式属性
    title: {
        fontSize: Platform.OS === 'ios' ? 17 : 20,
        fontWeight: Platform.OS === 'ios' ? '700' : '500',
        color: 'rgba(0, 0, 0, .9)',
        textAlign: Platform.OS === 'ios' ? 'center' : 'left',
        marginHorizontal: 16,
    },
});

export default HeaderTitle;