BlogSingleApi

BlogSingleApi()

博客使用单钩。实例名称:blogSingleApi

你可以利用这个来添加细节到你的博客页面,并修改它的结构。

构造函数

新BlogSingleApi()

例子
externalCodeSetup.blogSingleApi.METHOD_NAME

方法

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>
例子

用户想要在BlogHeaderAvatar组件中添加更多信息

...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]; }) }
Baidu