方法
#setAfterDetailsComponent(AfterDetailsComponent)
您可以使用它来添加一个组件,该组件在标题中显示博客的详细信息,比如作者名和博客标题。
参数:
的名字 | 类型 | 描述 |
---|---|---|
AfterDetailsComponent |
React.ComponentType。<AfterDetailsComponentProps> |
例子
//在custom_code/components/AfterDetails.js中import React from ' React ';import {View, Text} from 'react-native';从'moment'中导入moment;const AfterDetails = (props) => {const {blog} = props;const lastModified = moment(blog.modified).startOf('day').fromNow();return This blog was last modified {lastModified} } export default AfterDetails;/ /在custom_code / index.js……从“。/components/AfterDetails”中导入AfterDetails;export const applyCustomCode = externalCodeSetup => {externalCodeSetup. blogsingleap. setafterdetailscomponent ((props) => )}
#setAfterProfileHeader(AfterProfileHeader)
如果你想包含一个抽象,图像或任何其他信息,用于在标题下面添加一个组件。
参数:
的名字 | 类型 | 描述 |
---|---|---|
AfterProfileHeader |
React.ComponentType。<AfterBlogProfileHeaderProps> |
例子
...从“react-native-fast-image”中导入fasttimage;export const applyCustomCode = externalCodeSetup => {const AfterProfileHeader = ({blog}) => {return (< fasttimage style={{width: "auto", height: 100}} source={{uri: "https://link-to-image.png"}} />)} externalcodeseup . blogsingleap. setafterprofileheader (AfterProfileHeader)}}
#setBeforeDetailsComponent(BeforeDetailsComponent)
您可以使用它添加一个组件,在blog详细信息之前显示标题和作者等信息。
参数:
的名字 | 类型 | 描述 |
---|---|---|
BeforeDetailsComponent |
React.ComponentType。<BeforeDetailsComponentProps> |
例子
//在custom_code/components/BeforeDetails.js中import React from ' React ';import {View, Text} from 'react-native';从'moment'中导入moment;const BeforeDetails = (props) => {const {blog} = props;const lastModified = moment(blog.modified).startOf('day').fromNow();return This blog was last modified {lastModified} } export default BeforeDetails;//在custom_code/index.js中从"./components/BeforeDetails"中导入BeforeDetails;export const applyCustomCode = externalCodeSetup => {externalCodeSetup. blogsingleap. setbeforedetailscomponent ((props) => )}
#setBlogDetailsComponent(BlogDetailsComponent)
它替换了标题中的博客细节组件。
参数:
的名字 | 类型 | 描述 |
---|---|---|
BlogDetailsComponent |
React.ComponentType。<BlogDetailsComponentProps> |
例子
...从“react-native-reanimated”中导入Animated;export const applyCustomCode = externalCodeSetup => {const BlogDetailsComponent = ({blog, global, titleOpacity, textStyle}) => {return(<动画。Text numberolines ={4} style={[全局。text theadertitle, {alignSelf: "flex-start",透明度:titleOpacity}, textStyle]} > {blog。{(blog.commentCount > 0) && "-检查所有迷人的评论!"} < / Animated.Text >);} externalCodeSetup.blogSingleApi.setBlogDetailsComponent (BlogDetailsComponent)}
#setBlogHeaderAvatar(BlogHeaderAvatar)
您可以替换博客头头像,而不是使用默认设置,默认设置包括头像、作者姓名和发布日期的显示。
参数:
的名字 | 类型 | 描述 |
---|---|---|
BlogHeaderAvatar |
React.ComponentType。<BlogHeaderAvatarProps> |
例子
...import AppAvatar from "@src/components/AppAvatar";export const applyCustomCode = externalCodeSetup => {const BlogHeaderAvatar = ({blog, global, textStyle}) => {return ( {博客。 {博客。文本链接}< / > <文本样式={(全球。textMeta textStyle]} >{博客。date} );} externalCodeSetup.blogSingleApi.setBlogHeaderAvatar (BlogHeaderAvatar);}
#setCustomHeaderBackground(customHeaderBackground)
您可以为所有博客添加自定义封面图像或横幅,以替换默认的博客封面图像。(如果您想要更改特定博客的图像标题背景,那么您必须在函数中指定该博客。)
参数:
的名字 | 类型 | 描述 |
---|---|---|
customHeaderBackground |
字符串 | 资源来取代一个博客的封面图像 |
例子
externalCodeSetup.blogSingleApi.setCustomHeaderBackground(“https://link-to-image.png”);
#setTransformBlogHeaderButtons(transformBlogHeaderButtons)
你可以将默认的博客按钮转换为评论、Facebook和Twitter分享,并将其替换为你喜欢的按钮。
参数:
的名字 | 类型 | 描述 |
---|---|---|
transformBlogHeaderButtons |
TransformBlogButtonsCallback |
例子
...从“react-native-share”导入Share;import IconButton from "@src/components/IconButton";export const applyCustomCode = externalCodeSetup => {externalCodeSetup. blogsingleapi。setTransformBlogHeaderButtons((button, blog) => {const social = Share.Social.EMAIL;const hasCover = !!blog.featuredImage;const iconBackgroundColor = hasCover ?“# fff”:“# A6ADB5”;const iconTintColor = hasCover ?:“# 000 # fff”;const Email = 共享。shareSingle({信息:blog.excerpt。呈现,url:博客。链接、标题:博客。title, subject: blog.title, email: "you@email.com", social: social }) } icon={{uri: "https://link-to-image.png"}} touchableStyle={{ backgroundColor: iconBackgroundColor, alignItems: "center", borderRadius: 18, padding: 0, marginRight: 8 }} tintColor={iconTintColor} style={{ height: 28, width: 28 }} rtlStyleFix={"handled"} /> return [...buttons, Email]; }) }