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;
React Navigation源代码阅读 :views/Header/HeaderTitle.js
猜你喜欢
转载自blog.csdn.net/andy_zhang2007/article/details/80334435
今日推荐
周排行