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

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;

猜你喜欢

转载自blog.csdn.net/andy_zhang2007/article/details/80334435