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
最新推荐文章于 2022-10-31 08:58:39 发布
本文介绍了一个React Native中用于自定义导航头标题组件的例子。该组件基于Animated.Text实现,并根据平台不同调整样式。开发人员可以通过navigationOptions.headerTitle来自定义头部标题。

743

被折叠的 条评论
为什么被折叠?



