模板版本:v0.4.0
react-native-material-ui
本项目基于 react-native-material-ui 开发。
该第三方库的仓库已迁移至 Gitcode,且支持直接从 npm 下载,新的包名为:@react-native-ohos/react-native-material-ui。 版本所属关系如下:
1. 安装与使用
进入到工程目录并输入以下命令:
npm
npm install @react-native-ohos/react-native-material-ui
yarn
yarn add @react-native-ohos/react-native-material-ui
下面的代码展示了这个库的基本使用场景:
import { ActionButton} from 'react-native-material-ui';
import { View, StyleSheet,ScrollView,Text } from 'react-native'
import { useState } from 'react';
const ActionButtonDemo = () => {
const [actionText,setActionText] = useState('')
return (
<>
<ScrollView style={styles.scrollView}>
<View style={styles.view}>
<ActionButton
actions={[
{ icon: 'email', label: 'Email',name:'email'},
{ icon: 'phone', label: 'Phone',name:'Phone' },
{ icon: 'sms', label: 'Text',name:'Text' },
{ icon: 'chat', label: 'chat',name:'chat' },
]}
icon='email'
transition="speedDial"
/>
</View>
<View style={styles.view}>
<ActionButton
onPress={()=>setActionText("onPress actionText")}
actions={[
{ icon: 'email', label: 'Email',name:'email'},
{ icon: 'phone', label: 'Phone',name:'Phone' },
{ icon: 'sms', label: 'Text',name:'Text' },
{ icon: 'chat', label: 'chat',name:'chat' },
]}
icon='email'
transition="speedDial"
/>
<Text>{actionText}</Text>
</View>
<View style={styles.view}>
<ActionButton
actions={[{ icon: 'email', label: 'email', name: 'email' },
{ icon: 'phone', label: 'Phone', name: 'phone' },
{ icon: 'sms', label: 'sms', name: 'sms' },
{ icon: 'chat', label: 'chat', name: 'chat' }]}
icon="share"
transition="toolbar"
/>
</View>
<View style={styles.view}>
<ActionButton
style={{container:{backgroundColor:'blue'},icon:{color:'red'},positionContainer:{top:2,bottom:2}}}
actions={[
{ icon: 'email', label: 'Email',name:'email'},
{ icon: 'phone', label: 'Phone',name:'Phone' },
{ icon: 'sms', label: 'Text',name:'Text' },
{ icon: 'chat', label: 'chat',name:'chat' },
]}
icon='email'
transition="speedDial"
/>
<Text>{actionText}</Text>
</View>
<View style={styles.view}>
<ActionButton
style={{toolbarContainer:{backgroundColor:'blue'}}}
actions={[{ icon: 'email', label: 'email', name: 'email' },
{ icon: 'phone', label: 'Phone', name: 'phone' },
{ icon: 'sms', label: 'sms', name: 'sms' },
{ icon: 'chat', label: 'chat', name: 'chat' }]}
icon="share"
transition="toolbar"
/>
</View>
</ScrollView>
</>
)
}
const styles = StyleSheet.create({
view: {
width: '100%',
height: 350,
},
scrollView:{
marginBottom:70
}
});
export default ActionButtonDemo
在 ArkTs 侧引入和注册字体文件
步骤一: 复制字体文件到 entry/src/main/resources/rawfile/assets/assets/fonts 目录下(如使用了外部字体文件,需要将*.ttf 文件复制过来)
步骤二: 打开 entry/src/main/ets/pages/Index.ets,添加以下代码
const fonts: Record<string, Resource> = {
"Pacifico-Regular": $rawfile("assets/assets/fonts/Pacifico-Regular.ttf"),
"StintUltraCondensed-Regular": $rawfile("assets/assets/fonts/StintUltraCondensed-Regular.ttf"),
'Entypo': $rawfile('assets/assets/fonts/Entypo.ttf'),
'EvilIcons': $rawfile('assets/assets/fonts/EvilIcons.ttf'),
'Feather': $rawfile('assets/assets/fonts/Feather.ttf'),
'FontAwesome': $rawfile('assets/assets/fonts/FontAwesome.ttf'),
'FontAwesome5Brands-Regular': $rawfile('assets/assets/fonts/FontAwesome5_Brands.ttf'),
'FontAwesome5Free-Regular': $rawfile('assets/assets/fonts/FontAwesome5_Regular.ttf'),
'FontAwesome5Free-Solid': $rawfile('assets/assets/fonts/FontAwesome5_Solid.ttf'),
'FontAwesome6Brands-Regular': $rawfile('assets/assets/fonts/FontAwesome6_Brands.ttf'),
'FontAwesome6Free-Regular': $rawfile('assets/assets/fonts/FontAwesome6_Regular.ttf'),
'FontAwesome6Free-Solid': $rawfile('assets/assets/fonts/FontAwesome6_Solid.ttf'),
'fontcustom': $rawfile('assets/assets/fonts/Foundation.ttf'),
'Ionicons': $rawfile('assets/assets/fonts/Ionicons.ttf'),
'Material Design Icons': $rawfile('assets/assets/fonts/MaterialCommunityIcons.ttf'),
'Material Icons': $rawfile('assets/assets/fonts/MaterialIcons.ttf'),
'Octicons': $rawfile('assets/assets/fonts/Octicons.ttf'),
'simple-line-icons': $rawfile('assets/assets/fonts/SimpleLineIcons.ttf'),
'zocial': $rawfile('assets/assets/fonts/Zocial.ttf'),
}
@Entry
@Component
struct Index {
//...
build() {
Column(){
//...
//注册字体文件
RNApp({
rnInstanceConfig: {
//...
fontResourceByFontFamily: fonts
},
//...
})
}
//...
}
}
2. 约束与限制
2.1. 兼容性
本文档内容基于以下版本验证通过:
- RNOH: 0.72.96; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
- RNOH: 0.72.33; SDK: HarmonyOS NEXT B1; IDE: DevEco Studio 5.0.3.900; ROM: Next.0.0.71;
- RNOH: 0.77.18; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
- RNOH: 0.82.1; SDK: HarmonyOS 6.0.0 Release SDK; IDE: DevEco Studio 6.0.0.858; ROM: 6.0.0.112;
3. 组件
"Platform"列表示该属性在原三方库上支持的平台。
"HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性;no 则表示不支持;partially 表示部分支持。使用方法跨平台一致,效果对标 iOS 或 Android 的效果。
| Name |
Description |
Type |
Required |
Platform |
HarmonyOS Support |
| actions |
图标名称(或元素)的数组,在主按钮被按下后显示 |
string[] |
no |
iOS/Android |
yes |
| onPress |
按钮被按下时调用 |
PropTypes.func |
no |
iOS/Android |
yes |
| icon |
图标将显示在文本之前 |
PropTypes.element PropTypes.string |
no |
iOS/Android |
yes |
| transition |
过渡效果 |
PropTypes.oneOf(['toolbar', 'speedDial']) |
no |
iOS/Android |
yes |
| style |
可以覆盖此按钮的任何样式 |
ActionButton style props |
no |
iOS/Android |
yes |
ActionButton style props
| Name |
Description |
Type |
Required |
Platform |
HarmonyOS Support |
| container |
容器样式 |
View.propTypes.style |
no |
iOS/Android |
yes |
| icon |
图标样式 |
Text.propTypes.style |
no |
iOS/Android |
yes |
| positionContainer |
位置容器样式 |
View.propTypes.style |
no |
iOS/Android |
yes |
| toolbarContainer |
工具栏样式 |
View.propTypes.style |
no |
iOS/Android |
yes |
Avatar
| Name |
Description |
Type |
Required |
Platform |
HarmonyOS Support |
| image |
渲染图片 |
PropTypes.shape({ type: PropTypes.oneOf([Image]) }), |
no |
iOS/Android |
yes |
| icon |
在头像内部渲染图标元素 |
PropTypes.string |
no |
iOS/Android |
yes |
| iconColor |
渲染该颜色的图标 |
PropTypes.string |
no |
iOS/Android |
yes |
| iconSize |
渲染该大小的图标 |
PropTypes.number |
no |
iOS/Android |
yes |
| text |
在头像内部渲染文本元素 |
PropTypes.string |
no |
iOS/Android |
yes |
| size |
头像大小 |
PropTypes.number |
no |
iOS/Android |
yes |
| style |
头像的内联样式 |
container: View.propTypes.style content: Text.propTypes.style |
no |
iOS/Android |
yes |
Badge
| Name |
Description |
Type |
Required |
Platform |
HarmonyOS Support |
| children |
徽章将相对于此节点添加 |
PropTypes.node |
no |
iOS/Android |
yes |
| text |
徽章内渲染的内容 |
PropTypes.string |
no |
iOS/Android |
yes |
| icon |
图标 |
PropTypes.string,{name:string,color,size} |
no |
iOS/Android |
yes |
| size |
徽章大小 |
PropTypes.number |
no |
iOS/Android |
yes |
| stroke |
徽章的描边宽度 |
PropTypes.number |
no |
iOS/Android |
yes |
| style |
可以覆盖此徽章的任何样式 |
PropTypes.array |
no |
iOS/Android |
yes |
Icon
| Name |
Description |
Type |
Required |
Platform |
HarmonyOS Support |
| name |
图标名称 |
string |
yes |
iOS/Android |
yes |
| style |
图标的样式 |
ViewStyle |
no |
iOS/Android |
yes |
| size |
图标的大小 |
number |
no |
iOS/Android |
yes |
| color |
图标的颜色 |
string |
no |
iOS/Android |
yes |
IconToggle
| Name |
Description |
Type |
Required |
Platform |
HarmonyOS Support |
| color |
图标的颜色 |
PropTypes.string |
no |
iOS/Android |
yes |
| maxOpacity |
涟漪效果的最大不透明度 |
PropTypes.number |
no |
iOS/Android |
yes |
| percent |
底色的大小 |
PropTypes.number |
no |
iOS/Android |
yes |
| disabled |
如果为 true,将禁止交互 |
PropTypes.bool |
no |
iOS/Android |
yes |
| size |
图标的大小(默认值为 24,参见调色板中的间距) |
PropTypes.number |
no |
iOS/Android |
yes |
| name |
要显示的图标名称 |
PropTypes.string.isRequired |
yes |
iOS/Android |
yes |
| children |
如果存在,将替代图标使用(参见 name 属性) |
PropTypes.element |
no |
iOS/Android |
yes |
| onPress |
IconToggle 被按下时调用 |
PropTypes.func |
no |
iOS/Android |
yes |
| style |
可以覆盖此 IconToggle 的任何样式 |
PropTypes.array |
no |
iOS/Android |
yes |
BottomNavigation
| Name |
Description |
Type |
Required |
Platform |
HarmonyOS Support |
| active |
选中/活动选项卡的键值 |
PropTypes.string |
no |
iOS/Android |
yes |
| children |
BottomNavigation.Action 节点 |
PropTypes.node.isRequired |
yes |
iOS/Android |
yes |
| hidden |
是否显示 BottomNavigation |
PropTypes.bool |
no |
iOS/Android |
No |
| style |
底部导航的内联样式 |
container: View.propTypes.style |
no |
iOS/Android |
yes |
BottomNavigation.Action
| Name |
Description |
Type |
Required |
Platform |
HarmonyOS Support |
| icon |
将作为操作的内容渲染在标签上方 |
PropTypes.string.isRequired |
yes |
iOS/Android |
yes |
| label |
将作为操作的内容渲染在图标下方 |
PropTypes.string |
no |
iOS/Android |
yes |
| active |
如果操作为活动状态则为 true(目前会以主色调高亮显示) |
PropTypes.bool.isRequired |
yes |
iOS/Android |
yes |
| onPress |
按下事件的回调函数 |
PropTypes.func |
no |
iOS/Android |
yes |
| style |
底部导航的内联样式 |
container: View.propTypes.style active: Text.propTypes.style disabled: Text.propTypes.style |
no |
iOS/Android |
yes |
| Name |
Description |
Type |
Required |
Platform |
HarmonyOS Support |
| disabled |
如果为 true,按钮将被禁用 |
PropTypes.bool |
no |
iOS/Android |
yes |
| raised |
如果为 true,按钮将具有凸起效果 |
PropTypes.bool |
no |
iOS/Android |
yes |
| primary |
按钮是否使用主色调 |
PropTypes.bool |
no |
iOS/Android |
yes |
| accent |
按钮是否使用强调色 |
PropTypes.bool |
no |
iOS/Android |
yes |
| onPress |
按钮被按下时调用。文本作为参数传入 |
PropTypes.func |
no |
iOS/Android |
yes |
| text |
按钮上显示的文本 |
PropTypes.string.isRequired |
yes |
iOS/Android |
yes |
| upperCase |
按钮文本将显示为大写字母 |
PropTypes.bool |
no |
iOS/Android |
yes |
| icon |
如果指定了该属性,图标将显示在文本之前 |
PropTypes.string |
no |
iOS/Android |
yes |
| style |
可以覆盖此按钮的任何样式 |
container: View.propTypes.style text: Text.propTypes.style |
no |
iOS/Android |
yes |
Card
| Name |
Description |
Type |
Required |
Platform |
HarmonyOS Support |
| onPress |
卡片被按下时调用 |
PropTypes.func |
no |
iOS/Android |
yes |
| style |
可以覆盖此卡片的任何样式 |
PropTypes.object |
no |
iOS/Android |
yes |
Checkbox
| Name |
Description |
Type |
Required |
Platform |
HarmonyOS Support |
| label |
图标后显示的文本 |
PropTypes.string |
yes |
iOS/Android |
yes |
| value |
onCheck 触发时返回的值 |
PropTypes.oneOfType([PropTypes.string, PropTypes.number]).isRequired |
yes |
iOS/Android |
yes |
| checked |
如果已勾选则为 true |
PropTypes.bool |
no |
iOS/Android |
yes |
| disabled |
复选框是否可用 |
PropTypes.bool |
no |
iOS/Android |
yes |
| uncheckedIcon |
当 checked 为 false 时显示的图标 |
PropTypes.string |
no |
iOS/Android |
yes |
| checkedIcon |
当 checked 为 true 时显示的图标 |
PropTypes.string |
no |
iOS/Android |
yes |
| onCheck |
状态改变时调用的事件 |
PropTypes.func |
yes |
iOS/Android |
yes |
Dialog:DialogDefaultActions
| Name |
Description |
Type |
Required |
Platform |
HarmonyOS Support |
| actions |
用于显示卡片的按钮 |
PropTypes.arrayOf(PropTypes.string).isRequired |
yes |
iOS/Android |
yes |
| options |
这将禁用按钮 |
PropTypes.shape({ actionName: { disabled: PropTypes.bool } }) |
no |
iOS/Android |
yes |
| onActionPress |
按下卡片按钮时触发的事件 |
PropTypes.func.isRequired |
yes |
iOS/Android |
yes |
| style |
可以覆盖此卡片的任何样式 |
PropTypes.shape({ defaultActionsContainer: ViewPropTypes.style, }), |
no |
iOS/Android |
yes |
Divider
| Name |
Description |
Type |
Required |
Platform |
HarmonyOS Support |
| inset |
分隔线向后缩进 |
PropTypes.bool |
no |
iOS/Android |
yes |
| style |
可以覆盖此分隔线的任何样式 |
PropTypes.shape({container: View.propTypes.style }) |
no |
iOS/Android |
yes |
Drawer
| Name |
Description |
Type |
Required |
Platform |
HarmonyOS Support |
| children |
抽屉中的子节点 |
PropTypes.node.isRequired |
yes |
iOS/Android |
yes |
| style |
可以覆盖此抽屉的任何样式 |
style: PropTypes.shape({ container: ScrollView.propTypes.style, contentContainer: View.propTypes.style}), |
no |
iOS/Android |
yes |
| Name |
Description |
Type |
Required |
Platform |
HarmonyOS Support |
| image |
Drawer.header 的图片 |
PropTypes.shape({ type: PropTypes.oneOf([Image]) }) |
no |
iOS/Android |
yes |
| backgroundColor |
抽屉头部的背景图片 |
PropTypes.string |
no |
iOS/Android |
No |
| children |
抽屉头部的子节点 |
PropTypes.node |
no |
iOS/Android |
yes |
| style |
可以覆盖此抽屉头部的任何样式 |
style: PropTypes.shape({contentContainer: View.propTypes.style,container: View.propTypes.style, }), |
no |
iOS/Android |
yes |
| Name |
Description |
Type |
Required |
Platform |
HarmonyOS Support |
| avatar |
Drawer.HeaderAccount 的头像 |
PropTypes.element |
no |
iOS/Android |
yes |
| accounts |
Drawer.HeaderAccount 的账户 |
PropTypes.string |
no |
iOS/Android |
yes |
| footer |
Drawer.HeaderAccount 的底部内容 |
ListItem.propTypes |
no |
iOS/Android |
yes |
| style |
可以覆盖此抽屉头部的任何样式 |
PropTypes.shape({Drawer:HeaderAccount style}) |
no |
iOS/Android |
yes |
| name |
Type |
Required |
Platform |
HarmonyOS Support |
| container |
View.propTypes.style |
no |
iOS/Android |
yes |
| accountContainer |
View.propTypes.style |
no |
iOS/Android |
yes |
| topContainer |
View.propTypes.style |
no |
iOS/Android |
yes |
| avatarsContainer |
View.propTypes.style |
no |
iOS/Android |
yes |
| activeAvatarContainer |
View.propTypes.style |
no |
iOS/Android |
yes |
| inactiveAvatarContainer |
View.propTypes.style |
no |
iOS/Android |
yes |
Drawer:Section
| Name |
Description |
Type |
Required |
Platform |
HarmonyOS Support |
| title |
抽屉分区的标题 |
PropTypes.string |
yes |
iOS/Android |
yes |
| items |
抽屉分区的项目 |
Drawer:Section items |
yes |
iOS/Android |
yes |
| divider |
抽屉分区的分隔线 |
PropTypes.bool |
no |
iOS/Android |
yes |
| style |
可以覆盖此抽屉分区的任何样式 |
PropTypes.shape({Drawer:Section style}) |
no |
iOS/Android |
No |
Drawer:Section items
| name |
Type |
Required |
Platform |
HarmonyOS Support |
| icon |
PropTypes.string |
no |
iOS/Android |
yes |
| value |
PropTypes.oneOfType([PropTypes.string, PropTypes.element]).isRequired |
yes |
iOS/Android |
yes |
| label |
PropTypes.string |
no |
iOS/Android |
yes |
| onPress |
PropTypes.func |
no |
iOS/Android |
yes |
| onLongPress |
PropTypes.func |
no |
iOS/Android |
No |
| active |
PropTypes.bool |
no |
iOS/Android |
yes |
| disabled |
PropTypes.bool |
no |
iOS/Android |
No |
ListItem
| Name |
Description |
Type |
Required |
Platform |
HarmonyOS Support |
| dense |
是否紧凑显示 |
PropTypes.bool |
no |
iOS/Android |
yes |
| divider |
是否显示分隔线 |
PropTypes.bool |
no |
iOS/Android |
yes |
| onPress |
ListItem 被按下时调用 |
PropTypes.func |
no |
iOS/Android |
yes |
| numberOfLines |
行数 |
PropTypes.oneOf([1, 2, 3, 'dynamic']) |
no |
iOS/Android |
yes |
| style |
可以覆盖此 ListItem 的任何样式 |
ListItem style |
no |
iOS/Android |
yes |
| leftElement |
左侧元素 |
PropTypes.oneOfType([ PropTypes.element,PropTypes.string ]) |
no |
iOS/Android |
yes |
| onLeftElementPress |
左侧按钮被按下时触发的事件 |
PropTypes.func |
no |
iOS/Android |
No |
| centerElement |
中间元素 |
PropTypes.oneOfType([PropTypes.element, PropTypes.string, PropTypes.shape({primaryText: PropTypes.string.isRequired,secondaryText: PropTypes.string,tertiaryText: PropTypes.string }) ]) |
yes |
iOS/Android |
yes |
| rightElement |
右侧元素 |
PropTypes.element, PropTypes.string, PropTypes.shape({ menu: PropTypes.shape({ labels: PropTypes.array.isRequired}) }) |
no |
iOS/Android |
yes |
| onRightElementPress |
右侧按钮被按下时触发的事件 |
PropTypes.func |
no |
iOS/Android |
yes |
| children |
子节点 |
PropTypes.node |
no |
iOS/Android |
yes |
ListItem style
| name |
Type |
Required |
Platform |
HarmonyOS Support |
| container |
View.propTypes.style |
no |
iOS/Android |
yes |
| contentViewContainer |
View.propTypes.style |
no |
iOS/Android |
yes |
| leftElementContainer |
View.propTypes.style |
no |
iOS/Android |
yes |
| centerElementContainer |
View.propTypes.style |
no |
iOS/Android |
yes |
| textViewContainer |
View.propTypes.style |
no |
iOS/Android |
yes |
| primaryText |
Text.propTypes.style |
no |
iOS/Android |
yes |
| firstLine |
View.propTypes.style |
no |
iOS/Android |
yes |
| primaryTextContainer |
Text.propTypes.style |
no |
iOS/Android |
yes |
| secondaryText |
Text.propTypes.style |
no |
iOS/Android |
yes |
| tertiaryText |
Text.propTypes.style |
no |
iOS/Android |
yes |
| rightElementContainer |
View.propTypes.style |
no |
iOS/Android |
yes |
| leftElement |
View.propTypes.style |
no |
iOS/Android |
yes |
| rightElement |
View.propTypes.style |
no |
iOS/Android |
yes |
| Name |
Description |
Type |
Required |
Platform |
HarmonyOS Support |
| text |
显示的文本 |
PropTypes.string.isRequired |
yes |
iOS/Android |
yes |
| inset |
副标题向后缩进 |
PropTypes.bool |
no |
iOS/Android |
yes |
| lines |
副标题行数 |
PropTypes.number |
no |
iOS/Android |
yes |
| style |
可以覆盖此副标题的任何样式 |
PropTypes.shape({container: View.propTypes.style ,text:Text.propTypes.style}) |
no |
iOS/Android |
yes |
Snackbar
| Name |
Description |
Type |
Required |
Platform |
HarmonyOS Support |
| message |
要显示的文本消息 |
PropTypes.string.isRequired |
yes |
iOS/Android |
yes |
| visible |
是否显示 snackbar |
PropTypes.bool |
no |
iOS/Android |
yes |
| timeout |
显示 snackbar 的时间,单位为毫秒 |
PropTypes.number |
no |
iOS/Android |
yes |
| onRequestClose |
超时结束时的回调函数 |
PropTypes.func.isRequired |
yes |
iOS/Android |
yes |
| bottomNavigation |
屏幕上是否有底部导航栏 |
PropTypes.bool |
no |
iOS/Android |
yes |
| onActionPress |
点击操作按钮时执行的函数 |
PropTypes.func |
no |
iOS/Android |
yes |
| actionText |
操作按钮上显示的文本标签 |
PropTypes.string |
no |
iOS/Android |
yes |
| style |
snackbar 的内联样式 |
container: ViewPropTypes.style, message: ViewPropTypes.style, |
no |
iOS/Android |
yes |
| button |
按钮 |
ButtonProps |
no |
iOS/Android |
yes |
| Name |
Description |
Type |
Required |
Platform |
HarmonyOS Support |
| isSearchActive |
指示搜索是否处于活动状态 |
PropTypes.bool |
yes |
iOS/Android |
yes |
| searchable |
要激活搜索功能时,需要传入此对象并配置搜索参数 |
searchable props |
yes |
iOS/Android |
yes |
| size |
工具栏上每个图标的大小 |
PropTypes.number |
no |
iOS/Android |
yes |
| style |
可以通过此属性覆盖组件的任何样式 |
Toolbar style |
no |
iOS/Android |
yes |
| hidden |
是否显示工具栏 |
PropTypes.bool |
no |
iOS/Android |
No |
| onPress |
centerElement 被按下时调用 |
PropTypes.func |
no |
iOS/Android |
yes |
| leftElement |
将显示在左侧 |
PropTypes.element |
no |
iOS/Android |
yes |
| onLeftElementPress |
leftElement 被按下时调用 |
PropTypes.func |
no |
iOS/Android |
yes |
| centerElement |
将显示在 leftElement 和 rightElement 之间,通常用于标题 |
PropTypes.element |
no |
iOS/Android |
yes |
| rightElement |
将显示在右侧 |
rightElement props |
no |
iOS/Android |
yes |
| onRightElementPress |
rightElement 被按下时调用 |
PropTypes.func |
no |
iOS/Android |
yes |
searchable props
| name |
Description |
Type |
Required |
Platform |
HarmonyOS Support |
| onChangeText |
搜索文本改变时调用 |
PropTypes.func |
no |
iOS/Android |
yes |
| onSearchClosed |
搜索关闭时调用 |
PropTypes.func |
no |
iOS/Android |
yes |
| onSearchCloseRequested |
请求关闭搜索时调用 |
PropTypes.func |
no |
iOS/Android |
yes |
| onSearchPressed |
搜索打开时调用 |
PropTypes.func |
no |
iOS/Android |
yes |
| onSubmitEditing |
用户在硬件键盘上按下提交按钮时调用 |
PropTypes.func |
no |
iOS/Android |
yes |
| placeholder |
搜索输入框的占位文本 |
PropTypes.string |
no |
iOS/Android |
yes |
| autoFocus |
指示搜索打开后输入框是否应自动获得焦点 |
PropTypes.bool |
no |
iOS/Android |
yes |
| autoCapitalize |
启用搜索输入框的自动大写功能 |
PropTypes.string |
no |
iOS/Android |
No |
| autoCorrect |
启用搜索输入框的自动纠正功能 |
PropTypes.bool |
no |
iOS/Android |
No |
| icon |
覆盖默认搜索图标 |
PropTypes.string |
no |
iOS/Android |
yes |
rightElement props
| name |
Description |
Required |
Platform |
HarmonyOS Support |
| PropTypes.element |
一个操作(图标名称),相当于 的别名 |
no |
iOS/Android |
yes |
| PropTypes.string |
一个操作(图标名称),相当于 ['icon1'] 的别名 |
no |
iOS/Android |
yes |
| PropTypes.arrayOf(PropTypes.string), |
多个操作:['icon1', 'icon2', ...] |
no |
iOS/Android |
yes |
| PropTypes.shape |
用于操作和菜单。菜单将作为最后一个图标显示 |
no |
iOS/Android |
yes |
| name |
Type |
Required |
Platform |
HarmonyOS Support |
| container |
Animated.View.propTypes.style |
no |
iOS/Android |
yes |
| leftElementContainer |
View.propTypes.style |
no |
iOS/Android |
yes |
| leftElement |
Text.propTypes.style, |
no |
iOS/Android |
yes |
| centerElementContainer |
View.propTypes.style |
no |
iOS/Android |
yes |
| titleText |
Text.propTypes.style, |
no |
iOS/Android |
yes |
| rightElementContainer |
View.propTypes.style |
no |
iOS/Android |
yes |
| rightElement |
Text.propTypes.style |
no |
iOS/Android |
yes |
4.主题
如果您想使用默认主题,可以跳过此步骤
如果您想更改应用程序的主色,只需将自己的设置传递给 ThemeContext.Provider 对象即可。这些设置将与默认主题合并。
import React, { Component } from 'react';
import { Navigator, NativeModules } from 'react-native';
import { COLOR, ThemeContext, getTheme } from 'react-native-material-ui';
const uiTheme = {
palette: {
primaryColor: COLOR.green500,
},
toolbar: {
container: {
height: 50,
},
},
};
class Main extends Component {
render() {
return (
<ThemeContext.Provider value={getTheme(uiTheme)}>
<App />
</ThemeContext.Provider>
);
}
}
5.遗留问题
6.其他
- RadioButton组件功能在Android和iOS不生效, HarmonyOS与Android,iOS表现一致。原库 issue
- BottomNavigation和Toolbar组件hidden属性功能在Android和iOS不生效, HarmonyOS与Android,iOS表现一致。原库 issue
- Toolbar组件autoCapitalize属性和autoCorrect功能在Android和iOS不生效, HarmonyOS与Android,iOS表现一致。原库 issue
- Drawer:Section组件中的style属性设置样式在Android和iOS不生效,HarmonyOS与Android,iOS表现一致。原库 issue
- Drawer:Section组件中items属性对象中的onLongPress属性和disabled属性在Android和iOS不生效,HarmonyOS与Android,iOS表现一致。原库 issue
- ListItem组件中onLeftElementPress属性在Android和iOS不生效,HarmonyOS与Android,iOS表现一致。原库 issue
- Drawer:Header组件中backgroundColor属性与子元素中的Style属性冲突在Android和iOS不生效,HarmonyOS与Android,iOS表现一致。原库 issue
7.开源协议
本项目基于 The MIT License (MIT),请自由地享受和参与开源。