智能小程序 Ray 开发实践——基础内容组件 Text 和 Icon 介绍

Text

文本内容。

导入

import { Text } from '@ray-js/ray';

Props

属性	类型	默认值	说明	支持平台
className	string		样式名	涂鸦、微信
selectable	boolean	false	文本是否可选	涂鸦、微信
onClick	(e: { type: 'click' }) => void	false	点击事件	涂鸦、微信

示例代码

基本使用

import React from 'react';
 
import { Text } from '@ray-js/components';
 
export default function Demo() {
  return (
    <Text style={{ fontSize: 40, color: 'darkcyan' }}>遵循 React DSL 语法</Text>
  );
}

 

Icon

图标。

导入

import { Icon } from '@ray-js/ray';

效果

 

 

 

👉 点击免费领取 Iocn 文件

 

Props

属性	类型	默认值	说明	支持平台
type	string		图标类型，类型名 请查看上方示例中 iconfont 的 font class 名	涂鸦、微信、RN、Web
size	number	16	图标大小，单位 px	涂鸦、微信、RN、Web
color	string	#333333	图标颜色	涂鸦、微信、RN、Web

示例代码

基本使用

import React from 'react';
import { Icon, View } from '@ray-js/components';
 
export default function () {
  return (
    <React.Fragment>
      <View style={{ flexDirection: 'row' }}>
        <Icon type="icon-right" size={30} color="#007aff"></Icon>
        <Icon type="icon-warning" size={30} color="#007aff"></Icon>
        <Icon type="icon-a-cloudrainfill" size={30} color="#007aff"></Icon>
        <Icon type="icon-a-cloudsleetfill" size={30} color="#007aff"></Icon>
      </View>
    </React.Fragment>
  );
}

👉 立即免费领取开发资源，体验涂鸦 MiniApp 小程序开发。