From 3c3be455704b3c6cd64a46fccb32d8451fc3ebe6 Mon Sep 17 00:00:00 2001 From: liuyihai2002 Date: Tue, 25 Nov 2025 18:21:51 +0800 Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0BadgeExample=E3=80=81BottomMo?= =?UTF-8?q?dalExample=E7=9A=84demo=E5=92=8C=E6=96=87=E6=A1=A3?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Signed-off-by: liuyihai2002 --- App.js | 8 +- components/BadgeExample.tsx | 163 +++++ components/BottomModalExample.tsx | 269 +++++++ doc/beeshell_lyh.md | 1136 +++++++---------------------- 4 files changed, 704 insertions(+), 872 deletions(-) create mode 100644 components/BadgeExample.tsx create mode 100644 components/BottomModalExample.tsx diff --git a/App.js b/App.js index f7f919b..dc9d476 100644 --- a/App.js +++ b/App.js @@ -1,8 +1,10 @@ -import React, {Component} from 'react'; +import React, { Component } from 'react'; import { NavigationContainer } from '@react-navigation/native'; import { createStackNavigator } from '@react-navigation/stack'; import AppHome from './AppHome'; import ActionsheetExample from './components/ActionsheetExample'; +import BadgeExample from './components/BadgeExample'; +import BottomModalExample from './components/BottomModalExample'; import PickerExample from './components/PickerExample'; import RadioExample from './components/RadioExample'; import RateExample from './components/RateExample'; @@ -27,6 +29,8 @@ class App extends Component { + + @@ -38,7 +42,7 @@ class App extends Component { - {/* */} + {/* */} diff --git a/components/BadgeExample.tsx b/components/BadgeExample.tsx new file mode 100644 index 0000000..246e536 --- /dev/null +++ b/components/BadgeExample.tsx @@ -0,0 +1,163 @@ +import React, { Component } from 'react' +import { StyleSheet, View, ScrollView } from 'react-native' + +import { Badge, Button } from 'beeshell-ls' +import variables from 'beeshell-ls/common/styles/variables' + +const styles = StyleSheet.create({ + body: { + flex: 1, + backgroundColor: '#f9f9f9', // 和 ActionsheetExample 一致 + }, + container: { + padding: 16, + }, + panel: { + padding: 12, + backgroundColor: '#ffffff', + borderRadius: 8, + marginBottom: 16, + }, +}) + +export default class BadgeScreen extends Component { + constructor(props) { + super(props) + this.state = { + list: [1, 0, 5, 9, 'A', 99, '减', '领券', '双旦大促'], + showBasic: false, + showMini: false, + showCustom: false, + showCombined: false, + } + } + + toggle = (key) => { + this.setState((prevState) => ({ + [key]: !prevState[key], + })) + } + + render() { + const { list, showBasic, showMini, showCustom, showCombined } = this.state + return ( + + + {/* 基础 */} + + {showBasic && ( + + {list.map((item, index) => ( + + ))} + + )} + + {/* Mini */} + + {showMini && ( + + {list.map((item, index) => ( + + ))} + + )} + + {/* 自定义样式 */} + + {showCustom && ( + + {list.slice(0, 5).map((item, index) => ( + + ))} + + {list.slice(5, 9).map((item, index) => ( + + ))} + + + + + )} + + {/* 组合使用 */} + + {showCombined && ( + + + + + + + + + + )} + + + ) + } +} \ No newline at end of file diff --git a/components/BottomModalExample.tsx b/components/BottomModalExample.tsx new file mode 100644 index 0000000..c3e6c0a --- /dev/null +++ b/components/BottomModalExample.tsx @@ -0,0 +1,269 @@ +import React, { Component } from 'react'; +import { + ScrollView, + View, + Text, + StyleSheet, + Dimensions, + Alert, + TouchableOpacity, +} from 'react-native'; + +import { Button, BottomModal } from 'beeshell-ls'; +import variables from 'beeshell-ls/common/styles/variables'; + +const window = Dimensions.get('window'); + +const localStyles = StyleSheet.create({ + body: { + flex: 1, + backgroundColor: '#f9f9f9', + }, + container: { + padding: 16, + }, + modalContent: { + backgroundColor: '#fff', + height: 300, + alignItems: 'center', + justifyContent: 'center', + }, +}); + +export default class BottomModalScreen extends Component { + private bottomModal1: any = null; + private bottomModal2: any = null; + private bottomModal3: any = null; + private bottomModal4: any = null; + private bottomModal5: any = null; + private bottomModal6: any = null; + private bottomModal7: any = null; + private bottomModal8: any = null; + private bottomModal_titleStyle: any = null; + + render() { + return ( + + {/* ========== 1. leftCallback / rightCallback ========== */} + + (this.bottomModal1 = c)} + leftCallback={() => Alert.alert('回调', '点击了取消')} + rightCallback={() => Alert.alert('回调', '点击了完成')} + > + + 点击按钮触发回调 + + + + {/* ========== 2. title ========== */} + + (this.bottomModal2 = c)} + title="请选择品类" + leftCallback={() => console.log('取消')} + rightCallback={() => console.log('确认')} + > + + 自定义标题文本 + + + + {/* ========== 3. titleStyle ========== */} + + (this.bottomModal_titleStyle = c)} + title="红色加粗标题" + titleStyle={{ color: 'red', fontWeight: 'bold', fontSize: 18 }} + leftCallback={() => { }} + rightCallback={() => { }} + > + + 标题样式定制 + + + + {/* ========== 4. leftLabelText / rightLabelText ========== */} + + (this.bottomModal3 = c)} + leftLabelText="否" + rightLabelText="是" + leftCallback={() => console.log('选择“否”')} + rightCallback={() => console.log('选择“是”')} + > + + 自定义按钮文字 + + + + {/* ========== 5. leftLabelTextStyle / rightLabelTextStyle ========== */} + + (this.bottomModal4 = c)} + leftLabelText="放弃" + rightLabelText="提交" + leftLabelTextStyle={{ color: variables.mtdBrandDanger }} + rightLabelTextStyle={{ color: variables.mtdBrandSuccess }} + leftCallback={() => console.log('放弃操作')} + rightCallback={() => console.log('提交成功')} + > + + 自定义按钮样式 + + + + {/* ========== 6. 隐藏左侧按钮 (leftLabelText=null) ========== */} + + (this.bottomModal5 = c)} + leftLabelText={null} + rightLabelText="我知道了" + rightCallback={() => console.log('用户已知晓')} + > + + 仅显示右侧按钮 + + + + {/* ========== 7. 隐藏右侧按钮 (rightLabelText=null) ========== */} + + (this.bottomModal6 = c)} + rightLabelText={null} + leftLabelText="返回" + leftCallback={() => console.log('点击返回')} + > + + 仅显示左侧按钮 + + + + {/* ========== 8. titleContainer (自定义标题区域) ========== */} + + (this.bottomModal7 = c)} + titleContainer={ + + 自定义标题容器 + + } + leftCallback={() => { }} + rightCallback={() => { }} + > + + 整个标题区域被替换 + + + + {/* ========== 9. leftLabel / rightLabel (自定义按钮元素) ========== */} + + (this.bottomModal8 = c)} + leftLabel={ + + 自定义左 + + } + rightLabel={ + + ✓ 确认 + + } + leftCallback={() => console.log('点击了左侧自定义区域')} + rightCallback={() => this.bottomModal8?.close()} + > + + 左右按钮均为自定义元素 + + + + ); + } +} \ No newline at end of file diff --git a/doc/beeshell_lyh.md b/doc/beeshell_lyh.md index 7a14605..9a3c5ca 100644 --- a/doc/beeshell_lyh.md +++ b/doc/beeshell_lyh.md @@ -1,10 +1,9 @@ -> 模板版本：v0.2.2 - +> 模板版本：v0.0.1

-

teaset

+

beeshell-ls

- + Supported platforms @@ -12,7 +11,7 @@

-> [!TIP] [Github 地址](https://github.com/react-native-oh-library/teaset) +> [!TIP] [Github 地址](https://github.com/connerwu/beeshell_lib) ## 安装与使用 @@ -23,7 +22,7 @@ #### **npm** ```bash -npm install @react-native-ohos/teaset +npm install beeshell-ls # 0.72 npm @react-navigation/native-stack@6.9.26 @@ -60,27 +59,251 @@ yarn add @react-native-ohos/react-native-screens **Hello world** 从 teaset 包中 import 组件即可使用 ``` -import React, {Component} from 'react'; -import {View, AppRegistry} from 'react-native'; +import React, { Component } from 'react' +import { + View, + ScrollView, + Text, + StyleSheet, + Alert, + Switch +} from 'react-native' +import { Radio, Icon } from 'beeshell-ls' +import styles from './PickerExample' +import star from 'beeshell-ls/common/images/icons/star.png' +import star_o from 'beeshell-ls/common/images/icons/star-half-o.png' +import variables from 'beeshell-ls/common/styles/variables' + +const radioItems = [ + , + , + , +]; + +const LabelSwitch = ({ label, value, onValueChange }) => ( + + {label} + {/* 文字和开关间的间距 */} + + +); + + +export default class RadioScreen extends Component { + [propsName: string]: any + + constructor (props) { + super(props) + this.state = { + valueA: 0, + valueB: 2, + valueC: 3, + valueD: 4, + valueE: 5, + valueF: 6, + iconPosition: false, + flexDirection: false + } + } -import {Label} from 'teaset'; + componentDidMount () { + // setTimeout(() => { + // this.setState({ + // valueA: 1 + // }) + // }, 2000) + } -class HelloWorldApp extends Component { - render() { + renderItem (checked, index, label) { + let color = checked ? variables.mtdBrandDanger : variables.mtdGrayBase return ( - -