学习过Android开发的应该熟悉xml中的<View><TextView>之类的标签，学习过前端html开发的，也熟悉<div><p>之类的标签。同样的taro中也有自己的一套组件库。
taro的组件库以微信小程序的组件库为标准，结合jsx语法定制。
在使用React开发的时候，我们需要从taro的标准组件库"@tarojs/components"中引用组件。（不过现在直接使用标签，一般会自动引入）
下表中介绍了一些组件中通用的属性，请进行基础的了解，后续组件介绍过程中会使用到其中的部分属性。
| 参数 | 类型 | 说明 |
|---|---|---|
| id | string | 组件的唯一标示, 保持整个页面唯一 |
| className | string | 同?class;绑定组件样式css（scss、sass等）文件。它接受一个字符串作为值，这个字符串包含一个或多个 CSS 类名，类名之间用空格分隔。引用的是外部的组件样式。 |
| style | any | 组件样式；直接写样式，也就是使用的组件内部的样式。 |
| key | string or number | 如果列表中项目的位置会动态改变或者有新的项目添加到列表中， 需要使用 key?来指定列表中项目的唯一的标识符。 |
| hidden | boolean | 组件是否显示, 所有组件默认显示 |
| animation | { actions: TaroGeneral.IAnyObject[]; } | 动画属性 |
| ref | LegacyRef<T> | 引用，相当与把当前组件赋值给这个ref，后面就可以用这个ref来调用当前组件的方法之类的。 |
| dangerouslySetInnerHTML | { __html: string; } | 插入HTML，存在安全隐患。 |
PS:
| 参数 | 类型 | 说明 |
|---|---|---|
| onTouchStart | (event: TouchEvent) => void | 手指触摸动作开始 |
| onTouchMove | (event: TouchEvent) => void | 手指触摸后移动 |
| onTouchCancel | (event: TouchEvent) => void | 手指触摸动作被打断，如来电提醒，弹窗 |
| onTouchEnd | (event: TouchEvent) => void | 手指触摸动作结束 |
| onClick | (event: ITouchEvent) => void | 手指触摸后马上离开 |
| onLongPress | (event: CommonEvent<any>) => void | 手指触摸后，超过350ms再离开，如果指定了事件回调函数并触发了这个事件，tap事件将不被触发 |
| onLongClick | (event: CommonEvent<any>) => void | 手指触摸后，超过350ms再离开（推荐使用 longpress 事件代替） |
常用组件中我介绍的属性，一般只介绍H5支持的属性，其他只有部分小程序支持的属性，本文暂不描述。
View 组件是用于包裹其他组件的容器组件。它类似于 HTML 中的 <div> 元素，用于组织和布局页面的结构。View 可以包含文本、图像、其他 Taro 组件等，帮助你构建小程序页面的层次结构。
基本用法示例：
import Taro from '@tarojs/taro';
import { View, Text, Image } from '@tarojs/components';
function MyComponent() {
return (
<View className="container">
<Text>Hello, Taro!</Text>
<Image src="/path/to/image.jpg" />
</View>
);
}
export default MyComponent;
上述例子中，View 组件包含了一个文本组件 Text 和一个图片组件 Image，它们都被嵌套在 View 内部。className=“container”引用了名为container的组件样式。
View使用的属性，一般情况下就是上文中通用属性和通用事件会用的比较多。
| 参数 | 类型 | 默认值 | 说明 |
|---|---|---|---|
| hoverClass | string | none | 指定按下去的样式类。当?hover-class="none"?时，没有点击态效果 |
| hoverStartTime | number | 50 | 按住后多久出现点击态，单位毫秒 |
| hoverStayTime | number | 400 | 手指松开后点击态保留时间，单位毫秒 |
Text 组件用于显示文本内容。类似于 HTML 中的文本节点，Text 组件可以包含纯文本或内联样式。
以下是一个简单的例子：
import Taro from '@tarojs/taro';
import { View, Text } from '@tarojs/components';
function MyComponent() {
return (
<View>
<Text>Hello, Taro!</Text>
</View>
);
}
export default MyComponent;
在这个例子中，Text 组件包含了文本内容 "Hello, Taro!"。
Text?的属性和用法：
selectable： 设置为 true 时，文本内容可以被用户选中（类似于 user-select: text）。
space： 控制文本空格的显示，可选值有 'ensp'（中文字符空格宽度的一半）、?'emsp'（中文字符空格宽度相同）、'nbsp'（根据字体设置的空格大小）
注意事项：
Text 组件不支持样式属性（如 color、fontSize 等），如果需要样式，请使用 View 组件包裹文本，并在 View 上应用样式。
在 Taro 中，Text 组件主要用于显示纯文本，而对于富文本和样式化文本，可以使用 RichText 组件。 RichText 组件支持 HTML 标记，并且能够渲染富文本内容。
RichText 组件用于显示富文本内容，支持 HTML 标签和样式。它允许你在小程序中渲染包含格式、链接和其他 HTML 元素的文本。
import { View, RichText } from '@tarojs/components';
function MyComponent() {
const richTextContent = '<div>Hello, <strong>Taro</strong>!</div>';
return (
<View>
<RichText nodes={richTextContent} />
</View>
);
}
export default MyComponent;
// 或者下述
class App extends Components {
state = {
nodes: [{
name: 'div',
attrs: {
class: 'div_class',
style: 'line-height: 60px; color: red;'
},
children: [{
type: 'text',
text: 'Hello World!'
}]
}]
}
render () {
return (
<RichText nodes={this.state.nodes} />
)
}
}在这个例子中，`RichText` 组件通过 `nodes` 属性接受包含 HTML 标签的文本内容，并将其渲染为富文本。
RichText常用属性：
nodes：节点列表/ HTML String
space：和上文Text组件的space相同。控制文本空格的显示，可选值有 'ensp'（中文字符空格宽度的一半）、?'emsp'（中文字符空格宽度相同）、'nbsp'（根据字体设置的空格大小）
注意事项：
- `RichText` 组件主要用于渲染富文本内容，支持一部分 HTML 标签和样式，但不支持所有 HTML 特性。并且在小程序中的支持程度有限，某些特殊标签和样式可能不会得到正确渲染。在使用时请注意测试和验证。
Image 组件用于显示图片。该组件对应小程序平台的 <image> 组件，并在不同平台上进行适配转换。
以下是一个简单的使用示例：
import Taro from '@tarojs/taro';
import { View, Image } from '@tarojs/components';
function MyComponent() {
return (
<View>
<Image src="/path/to/image.jpg" />
</View>
);
}
export default MyComponent;
在这个例子中，Image 组件用于显示路径为 "/path/to/image.jpg" 的图片。
常见的 Image 组件属性：
src： 图片资源地址，可以是本地路径或远程 URL。
mode： 图片裁剪、缩放的模式，可选值为
| 参数 | 说明 |
|---|---|
| scaleToFill | 缩放模式，不保持纵横比缩放图片，使图片的宽高完全拉伸至填满 image 元素 |
| aspectFit | 缩放模式，保持纵横比缩放图片，使图片的长边能完全显示出来。也就是说，可以完整地将图片显示出来。 |
| aspectFill | 缩放模式，保持纵横比缩放图片，只保证图片的短边能完全显示出来。也就是说，图片通常只在水平或垂直方向是完整的，另一个方向将会发生截取。 |
| widthFix | 缩放模式，宽度不变，高度自动变化，保持原图宽高比不变 |
| heightFix | 缩放模式，高度不变，宽度自动变化，保持原图宽高比不变 |
| top | 裁剪模式，不缩放图片，只显示图片的顶部区域 |
| bottom | 裁剪模式，不缩放图片，只显示图片的底部区域 |
| center | 裁剪模式，不缩放图片，只显示图片的中间区域 |
| left | 裁剪模式，不缩放图片，只显示图片的左边区域 |
| right | 裁剪模式，不缩放图片，只显示图片的右边区域 |
| top left | 裁剪模式，不缩放图片，只显示图片的左上边区域 |
| top right | 裁剪模式，不缩放图片，只显示图片的右上边区域 |
| bottom left | 裁剪模式，不缩放图片，只显示图片的左下边区域 |
| bottom right | 裁剪模式，不缩放图片，只显示图片的右下边区域 |
lazy-load： 是否懒加载，默认值为 false。。只针对 page 与 scroll-view 下的 image 有效。
show-menu-by-longpress： 是否开启长按图片显示识别小程序码菜单，默认值为 false。
onLoad、onError 等事件： 提供图片加载成功、失败等事件的回调函数。
ButtonButton 组件用于创建按钮。该组件对应小程序平台的 <button> 组件，同时也会根据目标平台进行相应的转换。
以下是一个简单的使用示例：
import Taro from '@tarojs/taro';
import { View, Button } from '@tarojs/components';
function MyComponent() {
const handleClick = () => {
console.log('Button Clicked');
};
return (
<View>
<Button onClick={handleClick}>Click Me</Button>
</View>
);
}
export default MyComponent;
在这个例子中，Button 组件被嵌套在 View 组件内，通过 onClick 属性设置了按钮点击事件的处理函数。
常见的 Button 组件属性：
size： 按钮大小，可选值为 'default'（默认大小）、'mini'（小尺寸）。
type： 按钮类型，可选值为 'default'（白色）、'primary'（绿色）、'warn'（红色）。
plain：按钮是否镂空，背景色透明。
disabled： 是否禁用按钮。