BlockScreenApi

BlockScreenApi()

块屏幕钩子。实例名称:blockScreenHooksApi

允许修改应用程序页面上的块的外观

构造函数

新BlockScreenApi()

例子
externalCodeSetup.blockScreenHooksApi.METHOD_NAME

成员

setHeaderStyle

弃用:
  • 通过提供' headerStyle '覆盖应用头样式

方法

enableAlwaysShowHeaderLeft()

使用此属性总是显示标题左侧组件。

例子
externalCodeSetup.blockScreenHooksApi.enableAlwaysShowHeaderLeft ();

enableAlwaysShowHeaderRight()

使用此属性总是显示标题右侧组件。

例子
externalCodeSetup.blockScreenHooksApi.enableAlwaysShowHeaderRight ();

setBeforeBlockList(beforeBlockList)

内容显示在区块之前,React组件将显示在应用页面顶部的区块顶部。

参数:
的名字 类型 描述
beforeBlockList React.ComponentType。< >

反应本地组件

例子

用户希望在他们添加的任何块(如课程、通知或活动块)之前,在他们的主页上有登录用户的状态报告

//在custom_code/components/BeforeBlocks.js中import React from ' React ';import {View, Text} from 'react-native';import {globalStyle} from "@src/styles/global";import {useSelector} from "react-redux";从'react-native-fast-image'中导入fasttimage;const BeforeBlocks = (props) => {const globalStyles = useSelector((state) => globalStyle(state.config.styles))) //从redux获取样式const user = useSelector((state) => state.user. userobject);//从redux获取登录用户const {color, global} = globalStyles;return (    Welcome {user.nicename}! 你有{user.member_rest。unread_messages_count} unread messages   Your last activity was on {user.member_rest.last_activity}   ) } export default BeforeBlocks; //In custom_code/index.js ... import BeforeBlocks from "./components/BeforeBlocks"; export const applyCustomCode = externalCodeSetup => { externalCodeSetup.blockScreenHooksApi.setBeforeBlockList(() => ); }

setIconStyle(iconStyle)

当您输入不同的样式维度时,它将覆盖默认的标题图标样式(或主屏幕徽标)。当你使用此方法时,它将替换从WordPress BuddyBoss Dashboard > BuddyBoss App > Branding > Images > Home Screen Logo设置的图标图像。

参数:
的名字 类型 描述
iconStyle RNStyleValue

反应当地的风格

例子

用户想要调整应用程序主图标的高度

externalCodeSetup.blockScreenHooksApi。setIconStyle({高度:100});

setRenderHeaderLeft(渲染器)

使用此属性将组件添加到标题的左侧。即使用户向下滚动时,组件也将是可见的。

参数:
的名字 类型 描述
渲染器 React.ComponentType。< >

组件呈现

例子

添加到另一个页面的链接

//在custom_code/HomeHeaderLeft.js中import React from ' React ';import {withNavigation} from 'react-navigation';import IconButton from "@src/components/IconButton";const HomeHeaderLeft = (props) => ( props.navigation. navigation ("NotificationsScreen")} icon={require("@src/assets/img/notification-icon.png")} tintColor="#aaa" style={{height: 20, margin: 10}} />) export default withNavigation(HomeHeaderLeft);/ /在custom_code / index.js……import HomeHeaderLeft from "./components/HomeHeaderLeft";export const applyCustomCode = externalCodeSetup => {externalCodeSetup. blockscreenhoksapi . setrenderheaderleft (() => );}

setRenderHeaderRight(渲染器)

使用此属性将组件添加到标题的右侧。即使用户向下滚动时,组件也将是可见的。

参数:
的名字 类型 描述
渲染器 React.ComponentType。< >

组件呈现

例子

添加到另一个页面的链接

//在custom_code/HomeHeaderRight.js中import React from ' React ';import {withNavigation} from 'react-navigation';import IconButton from "@src/components/IconButton";const HomeHeaderRight = (props) => ( props.navigation.navigate("NotificationsScreen")} icon={require("@src/assets/img/notification-icon.png")} tintColor="#aaa" style={{height: 20, margin: 10}} />) export default withNavigation(HomeHeaderRight);/ /在custom_code / index.js……import HomeHeaderRight from "./components/HomeHeaderRight";export const applyCustomCode = externalCodeSetup => {externalCodeSetup. blockscreenhoksapi。setRenderHeaderRight (< HomeHeaderRight / >);}

setRenderHeaderTitle(渲染器)

通过将呈现函数作为参数,重写Blocks屏幕标题的呈现方式。

参数:
的名字 类型 描述
渲染器 React.ComponentType。< >

反应本地组件

例子

用户希望有一个粘性标题

//在custom_code/components/HeaderTitle.js中import React from ' React ';import {View, Text} from 'react-native';import {globalStyle, NAV_HEIGHT, DEVICE_WIDTH, GUTTER} from "@src/styles/global";import {useSelector} from "react-redux";import FontManager from ` @src/FontManager `;const HEADER_HEIGHT = FontManager。applyFontHeightAdjustment (NAV_HEIGHT + 69);const HeaderTitle = (props) => {const globalStyles = useSelector((state) => globalStyle(state.config.styles)) const {colors, global} = globalStyles;return (  My App Title   ) } export default HeaderTitle; //In custom_code/index.js ... import HeaderTitle from "./components/HeaderTitle"; export const applyCustomCode = externalCodeSetup => { externalCodeSetup.blockScreenHooksApi.setRenderHeaderTitle(() => ) }
Baidu