diff --git a/1224/react-native-aria.md b/1224/react-native-aria.md index ec12ad9f4c18ee2b3c435ebc6375d9dd98263a0c..9e505a98993889ce01bfb0f851e605b574fcb7ef 100644 --- a/1224/react-native-aria.md +++ b/1224/react-native-aria.md @@ -12,7 +12,6 @@

- > [!tip] [Github 地址](https://github.com/gluestack/react-native-aria/tree/v0.2.4) ## 安装与使用 @@ -20,11 +19,13 @@ React Native ARIA是可增量采用的。每个组件都作为单独的包发布，因此您可以在单个组件中使用它，并随着时间的推移逐渐添加更多组件。所有这些包都在npm上的@react-native-aria范围内发布。 进入到工程目录并输入以下命令： + #### **yarn** ```bash yarn add @react-native-aria/button@0.2.2 ``` + #### **npm** @@ -32,15 +33,17 @@ yarn add @react-native-aria/button@0.2.2 ```bash npm install @react-native-aria/button@0.2.2 ``` - + 除了单独的包之外，我们还提供了一个总包，其中包含所有React Native ARIA hooks + #### **yarn** ```bash yarn add react-native-aria@0.2.2 ``` + #### **npm** @@ -48,12 +51,13 @@ yarn add react-native-aria@0.2.2 ```bash npm install react-native-aria@0.2.2 ``` + 下面的代码展示了useToggleButton的基本使用场景： ```js -import React from 'react'; +import React from "react"; import { useToggleButton } from "@react-native-aria/button"; import { Pressable, Text, View } from "react-native"; import { useToggleState } from "@react-stately/toggle"; @@ -62,7 +66,7 @@ import { useRef } from "react"; export function ToggleButton(props) { const ref = useRef(null); let state = useToggleState(props); - let { buttonProps, isPressed } = useToggleButton(props, state, ref);//useToggleButton 是一个用于创建可切换按钮的 Hook，接受三个参数 + let { buttonProps, isPressed } = useToggleButton(props, state, ref); //useToggleButton 是一个用于创建可切换按钮的 Hook，接受三个参数 return ( @@ -94,14 +98,15 @@ export function ToggleButton(props) { export default function AriaDemo() { return ( - - Toggle button + + Toggle button - ); + ); } - ``` + 下面的代码展示了useCheckbox与useCheckboxGroup的基本使用场景： + ```javascript import React ,{ useContext, useRef }from 'react'; import {useCheckboxGroupState} from '@react-stately/checkbox'; @@ -115,7 +120,7 @@ export function CheckboxGroup(props: any) { let {children, label} = props; let state = useCheckboxGroupState(props); let {checkboxgroupProps, labelProps} = useCheckboxGroup(props, state); - + return ( {label && {label}} @@ -126,12 +131,12 @@ export function CheckboxGroup(props: any) { ); } export function Checkbox(props: any) { - + let state = useContext(CheckboxGroupContext); const inputRef = React.useRef(null); let {isFocusVisible, focusProps} = useFocusRing(); let { inputProps } = state - ? + ? useCheckboxGroupItem( { ...props, @@ -141,7 +146,7 @@ export function Checkbox(props: any) { state, inputRef ) - : + : useCheckbox(props, useToggleState(props), inputRef); return ( <> @@ -169,7 +174,9 @@ export default function CheckboxDemo() { } ``` + 下面的代码展示了useRadio与useRadioGroup的基本使用场景： + ```javascript import React from "react"; import { useRadioGroupState } from "@react-stately/radio"; @@ -239,7 +246,9 @@ export default function RadioDemo() { ); } ``` + 下面的代码展示了useSwitch的基本使用场景： + ```javascript import { useToggleState } from "@react-stately/toggle"; import React, { useRef } from "react"; @@ -410,12 +419,13 @@ export default function SwitchDemo () { ``` 下面的代码展示了useOverlayPosition的基本使用场景： + ```javascript import React from "react"; import { OverlayContainer, useOverlayPosition, - OverlayProvider + OverlayProvider, } from "@react-native-aria/overlays"; import { View, @@ -434,7 +444,6 @@ function CloseButton(props) { ); } - const OverlayView = ({ triggerRef, placement }) => { let overlayRef = React.useRef(); @@ -469,8 +478,8 @@ function Trigger({ placement }) { let triggerRef = React.useRef(); const [visible, setVisible] = React.useState(false); const toggleVisible = () => { - setVisible(!visible) - } + setVisible(!visible); + }; return ( @@ -480,9 +489,7 @@ function Trigger({ placement }) { accessibilityRole="button" accessibilityLabel="Click here to open an overlay" > - + Trigger @@ -496,17 +503,17 @@ function Trigger({ placement }) { ); } -export default function OverlaysDemo () { - return - - +export default function OverlaysDemo() { + return ( + + + + ); } - - const styles = StyleSheet.create({ - wrapper :{ + wrapper: { height: 500, alignItems: "center", justifyContent: "center", @@ -516,17 +523,18 @@ const styles = StyleSheet.create({ borderWidth: 1, paddingHorizontal: 10, paddingVertical: 10, - } -}) + }, +}); ``` + 更多hooks请参考[react-native-aria官方文档](https://geekyants.github.io/react-native-aria/docs/) + ## 约束与限制 ## 兼容性 本文档内容基于以下版本验证通过： - 1. RNOH：0.72.13; SDK：HarmonyOS NEXT Developer Preview1; IDE：DevEco Studio 4.1.3.500; ROM：2.0.0.59; ## 属性 @@ -535,19 +543,21 @@ const styles = StyleSheet.create({ > [!tip] "HarmonyOS Support"列为 yes 表示 HarmonyOS 平台支持该属性；no 则表示不支持；partially 表示部分支持。使用方法跨平台一致，效果对标 iOS 或 Android 的效果。 - 以下属性已验证，详情见 [react-native-aria官方文档](https://geekyants.github.io/react-native-aria/docs/) +以下属性已验证，详情见 [react-native-aria官方文档](https://geekyants.github.io/react-native-aria/docs/) + > - ### Hooks - -| Name | Description | Type | Platform | HarmonyOS Support | -| -------------------- | ----------------- | --------------- | -------- | ----------------- -| useToggleButton |Provides the behavior and accessibility implementation for a toggle button component. ToggleButtons allow users to toggle a selection on or off, for example switching between two states or modes. | Function | All | yes -| useCheckbox |Provides the behavior and accessibility implementation for a checkbox component. Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected. | Function | All | yes -| useCheckboxGroup |Provides the behavior and accessibility implementation for a checkbox group component. Checkbox groups allow users to select multiple items from a list of options. | Function | All | yes -| useRadioGroup |Provides the behavior and accessibility implementation for a radio group component. Radio groups allow users to select a single item from a list of mutually exclusive options. | Function | All | yes -| useSwitch |Provides the behavior and accessibility implementation for a switch component. A switch is similar to a checkbox, but represents on/off values as opposed to selection. | Function | All | yes -| OverlayContainer |Provides React Portal like functionality for React Native apps which can be useful for displaying absolutely positioned components like Menu, Tooltip, Popover. | Function | All | yes -| useOverlayPosition |Handles positioning overlays like popovers and menus relative to a trigger element, and updating the position when the window resizes. | Function | All | yes + +### Hooks + +| Name | Description | Type | Platform | HarmonyOS Support | +| ------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------- | -------- | ----------------- | +| useToggleButton | Provides the behavior and accessibility implementation for a toggle button component. ToggleButtons allow users to toggle a selection on or off, for example switching between two states or modes. | Function | All | yes | +| useCheckbox | Provides the behavior and accessibility implementation for a checkbox component. Checkboxes allow users to select multiple items from a list of individual items, or to mark one individual item as selected. | Function | All | yes | +| useCheckboxGroup | Provides the behavior and accessibility implementation for a checkbox group component. Checkbox groups allow users to select multiple items from a list of options. | Function | All | yes | +| useRadioGroup | Provides the behavior and accessibility implementation for a radio group component. Radio groups allow users to select a single item from a list of mutually exclusive options. | Function | All | yes | +| useSwitch | Provides the behavior and accessibility implementation for a switch component. A switch is similar to a checkbox, but represents on/off values as opposed to selection. | Function | All | yes | +| OverlayContainer | Provides React Portal like functionality for React Native apps which can be useful for displaying absolutely positioned components like Menu, Tooltip, Popover. | Function | All | yes | +| useOverlayPosition | Handles positioning overlays like popovers and menus relative to a trigger element, and updating the position when the window resizes. | Function | All | yes | ## 遗留问题 @@ -556,4 +566,3 @@ const styles = StyleSheet.create({ ## 开源协议 本项目基于 [The MIT License (MIT)](https://github.com/gluestack/react-native-aria/blob/main/LICENSE)，请自由地享受和参与开源。 - diff --git a/1224/react-native-drag-sort.md b/1224/react-native-drag-sort.md index e65a55c87aa9e681bf25019cc4909f5dd5c35725..9b980bc94e799eef760738e3472b1d5a24a0f584 100644 --- a/1224/react-native-drag-sort.md +++ b/1224/react-native-drag-sort.md @@ -13,9 +13,6 @@

- - - > [!tip] [Github 地址](https://github.com/mochixuan/react-native-drag-sort) ## 安装与使用 @@ -48,8 +45,8 @@ npm i react-native-drag-sort@2.4.4 ```js import React, { useState } from "react"; -import { View, Text, StyleSheet, SafeAreaView } from 'react-native'; -import { DragSortableView } from 'react-native-drag-sort'; +import { View, Text, StyleSheet, SafeAreaView } from "react-native"; +import { DragSortableView } from "react-native-drag-sort"; //此案例id1、id2不支持拖拽 const Dragsort = () => { const [data, setData] = useState([ @@ -90,7 +87,7 @@ const Dragsort = () => { return ( - DragSortableView + DragSortableView { onClickItem={(data, item, index) => { console.log("点击了第", index, "个元素"); }} - onDragStart={() => console.log('Drag started')} - onDragEnd={() => console.log('Drag end')} + onDragStart={() => console.log("Drag started")} + onDragEnd={() => console.log("Drag end")} onDataChange={() => { console.log("数据发生变化"); }} @@ -118,16 +115,12 @@ const Dragsort = () => { minOpacity={0.7} renderItem={(item, index) => { return ( - + {item.title} ); }} sortable={true} - /> ); @@ -141,28 +134,28 @@ const styles = StyleSheet.create({ alignContent: "center", borderRadius: 5, margin: 20, - backgroundColor: '#4e71f2', + backgroundColor: "#4e71f2", height: 50, width: 100, }, text: { fontSize: 18, - color: '#fff', - textAlign: 'center' + color: "#fff", + textAlign: "center", }, header: { height: 48, - justifyContent: 'center', - alignItems: 'center', - borderBottomColor: '#2ecc71', + justifyContent: "center", + alignItems: "center", + borderBottomColor: "#2ecc71", borderBottomWidth: 2, }, header_title: { - color: '#333', + color: "#333", fontSize: 24, - fontWeight: 'bold', - } -}) + fontWeight: "bold", + }, +}); export default Dragsort; ``` @@ -171,51 +164,55 @@ export default Dragsort; ```js //此案例Item1、Item2不支持拖拽 import React, { useState } from "react"; -import { View, Text } from 'react-native'; +import { View, Text } from "react-native"; import { AutoDragSortableView } from "react-native-drag-sort"; const AutoDragSortDemo = () => { const [data, setData] = useState([ - { id: '1', text: 'Item 1' }, - { id: '2', text: 'Item 2' }, - { id: '3', text: 'Item 3' }, - { id: '4', text: 'Item 4' }, - { id: '5', text: 'Item 5' }, - { id: '6', text: 'Item 6' }, - { id: '7', text: 'Item 7' }, - { id: '8', text: 'Item 8' }, - { id: '9', text: 'Item 9' }, - { id: '10', text: 'Item 10' }, - { id: '11', text: 'Item 11' }, - { id: '12', text: 'Item 12' }, - { id: '13', text: 'Item 13' }, - { id: '14', text: 'Item 14' }, - { id: '15', text: 'Item 15' }, - { id: '16', text: 'Item 16' }, - { id: '17', text: 'Item 17' }, - { id: '18', text: 'Item 18' }, - { id: '19', text: 'Item 19' }, - { id: '20', text: 'Item 20' }, - { id: '21', text: 'Item 21' }, - { id: '22', text: 'Item 22' }, - { id: '23', text: 'Item 23' }, - { id: '24', text: 'Item 24' }, - { id: '25', text: 'Item 25' }, - { id: '26', text: 'Item 26' }, - { id: '27', text: 'Item 27' }, - { id: '28', text: 'Item 28' }, + { id: "1", text: "Item 1" }, + { id: "2", text: "Item 2" }, + { id: "3", text: "Item 3" }, + { id: "4", text: "Item 4" }, + { id: "5", text: "Item 5" }, + { id: "6", text: "Item 6" }, + { id: "7", text: "Item 7" }, + { id: "8", text: "Item 8" }, + { id: "9", text: "Item 9" }, + { id: "10", text: "Item 10" }, + { id: "11", text: "Item 11" }, + { id: "12", text: "Item 12" }, + { id: "13", text: "Item 13" }, + { id: "14", text: "Item 14" }, + { id: "15", text: "Item 15" }, + { id: "16", text: "Item 16" }, + { id: "17", text: "Item 17" }, + { id: "18", text: "Item 18" }, + { id: "19", text: "Item 19" }, + { id: "20", text: "Item 20" }, + { id: "21", text: "Item 21" }, + { id: "22", text: "Item 22" }, + { id: "23", text: "Item 23" }, + { id: "24", text: "Item 24" }, + { id: "25", text: "Item 25" }, + { id: "26", text: "Item 26" }, + { id: "27", text: "Item 27" }, + { id: "28", text: "Item 28" }, ]); - const renderHeaderView=( + const renderHeaderView = ( - 标题 + + 标题 + - ) - const renderBottomView=( + ); + const renderBottomView = ( - 底部 + + 底部 + - ) - + ); + return ( { ); }} - scaleDuration={500} //拖拽项缩放效果的持续时间 - slideDuration={200} //拖拽项滑动效果的持续时间 - autoThrottle={100} //自动滑动到目的地的间隔时间 - autoThrottleDuration={500} //自动滑动到目的地的持续时间 + scaleDuration={500} //拖拽项缩放效果的持续时间 + slideDuration={200} //拖拽项滑动效果的持续时间 + autoThrottle={100} //自动滑动到目的地的间隔时间 + autoThrottleDuration={500} //自动滑动到目的地的持续时间 sortable={true} isDragFreely={false} fixedItems={[0, 1]} delayLongPress={100} - onDragStart={() => console.log('Drag started')} - onDragEnd={() => console.log('Drag end')} + onDragStart={() => console.log("Drag started")} + onDragEnd={() => console.log("Drag end")} renderHeaderView={renderHeaderView} headerViewHeight={50} scrollIndicatorInsets={{ top: 0, left: 0, bottom: 0, right: 0 }} @@ -280,7 +277,7 @@ export default AutoDragSortDemo; ##### AnySizeDragSortableView组件使用 ```js -import React,{createRef} from 'react'; +import React, { createRef } from "react"; import { Text, TouchableOpacity, @@ -288,245 +285,272 @@ import { View, Image, Dimensions, - SafeAreaView -} from 'react-native'; -import { AnySizeDragSortableView } from 'react-native-drag-sort' + SafeAreaView, +} from "react-native"; +import { AnySizeDragSortableView } from "react-native-drag-sort"; -const {width} = Dimensions.get('window') -const headerViewHeight = 160 -const bottomViewHeight = 40 +const { width } = Dimensions.get("window"); +const headerViewHeight = 160; +const bottomViewHeight = 40; -const getW = (index, isWidth) => isWidth ? index % 3 === 0 ? (width - 40) : (width - 60) / 2 : 80; +const getW = (index, isWidth) => + isWidth ? (index % 3 === 0 ? width - 40 : (width - 60) / 2) : 80; export default class AnySizeDragSortDemo extends React.Component { constructor(props) { super(props); - const items = [] + const items = []; for (let i = 0; i < 26; i++) { - items.push({ - text: String.fromCharCode(65 + i), - width: getW(i, true), - height: getW(i, false) - }) + items.push({ + text: String.fromCharCode(65 + i), + width: getW(i, true), + height: getW(i, false), + }); } - this.state = { - items, - movedKey: null + this.state = { + items, + movedKey: null, }; - this.sortableViewRef = createRef() + this.sortableViewRef = createRef(); } onDeleteItem = (item, index) => { - const items = [...this.state.items] - items.splice(index, 1) - this.setState({ items }) - } + const items = [...this.state.items]; + items.splice(index, 1); + this.setState({ items }); + }; _renderItem = (item, index, isMoved) => { - const {movedKey} = this.state + const { movedKey } = this.state; return ( { - this.setState({movedKey: item.text}) - this.sortableViewRef.current.startTouch(item, index) + this.setState({ movedKey: item.text }); + this.sortableViewRef.current.startTouch(item, index); }} - onPressOut = {() => this.sortableViewRef.current.onPressOut()} + onPressOut={() => this.sortableViewRef.current.onPressOut()} > - - { - - this.onDeleteItem(item, index)}> - - - - } - - { - isMoved ? ( - - - - ) : null - } - - {item.text} - + + { + + this.onDeleteItem(item, index)}> + + + } + + {isMoved ? ( + + + + ) : null} + + {item.text} + + - ) - } + ); + }; render() { const { items } = this.state; const renderHeaderView = ( - - - - mochixuan - Android, React-Native, Flutter, React, Web。Learn new knowledge and share new knowledge. - + + + + mochixuan + + Android, React-Native, Flutter, React, Web。Learn new knowledge and + share new knowledge. + - ) + + ); const renderBottomView = ( - - yarn add react-native-drag-sort - - ) + + yarn add react-native-drag-sort + + ); return ( <> - AnySize + AnySize item.text} - renderItem={this._renderItem} - onDataChange={(data, callback)=> { - this.setState({items: data},()=>{ - callback() - console.log('移动了') - }) - }} - renderHeaderView = {renderHeaderView} - headerViewHeight={headerViewHeight} - renderBottomView = {renderBottomView} - bottomViewHeight={bottomViewHeight} - movedWrapStyle={styles.item_moved} - onDragEnd={()=> console.log('Drag end')} - scrollIndicatorInsets={{ top: 1, left: 1, bottom: 1, right: 1 }} - autoThrottle={100} - autoThrottleDuration={500} - areaOverlapRatio={0.5} - childMarginTop={10} - childMarginBottom={10} - childMarginLeft={10} - childMarginRight={10} + ref={this.sortableViewRef} + dataSource={items} + keyExtractor={(item) => item.text} + renderItem={this._renderItem} + onDataChange={(data, callback) => { + this.setState({ items: data }, () => { + callback(); + console.log("移动了"); + }); + }} + renderHeaderView={renderHeaderView} + headerViewHeight={headerViewHeight} + renderBottomView={renderBottomView} + bottomViewHeight={bottomViewHeight} + movedWrapStyle={styles.item_moved} + onDragEnd={() => console.log("Drag end")} + scrollIndicatorInsets={{ top: 1, left: 1, bottom: 1, right: 1 }} + autoThrottle={100} + autoThrottleDuration={500} + areaOverlapRatio={0.5} + childMarginTop={10} + childMarginBottom={10} + childMarginLeft={10} + childMarginRight={10} /> - + ); } } const styles = StyleSheet.create({ item_wrap: { - position: 'relative', + position: "relative", paddingLeft: 20, - paddingTop: 20 + paddingTop: 20, }, item: { - justifyContent: 'space-around', - alignItems: 'center', - backgroundColor: '#f39c12', + justifyContent: "space-around", + alignItems: "center", + backgroundColor: "#f39c12", borderRadius: 4, }, item_clear_wrap: { - position: 'absolute', + position: "absolute", left: 10, top: 10, width: 20, height: 20, - zIndex: 999 + zIndex: 999, }, item_clear: { width: 20, - height: 20 + height: 20, }, item_moved: { opacity: 0.95, borderRadius: 4, }, item_icon_swipe: { - width: 50, - height: 50, - backgroundColor: '#fff', - borderRadius: 50 * 0.5, - justifyContent: 'center', - alignItems: 'center', + width: 50, + height: 50, + backgroundColor: "#fff", + borderRadius: 50 * 0.5, + justifyContent: "center", + alignItems: "center", }, item_icon: { width: 30, height: 30, - resizeMode: 'contain', + resizeMode: "contain", }, item_text_swipe: { - backgroundColor: '#fff', - width: 56, - height: 30, - borderRadius: 15, - justifyContent: 'center', - alignItems: 'center', + backgroundColor: "#fff", + width: 56, + height: 30, + borderRadius: 15, + justifyContent: "center", + alignItems: "center", }, item_text: { - color: '#444', - fontSize: 20, - fontWeight: 'bold', + color: "#444", + fontSize: 20, + fontWeight: "bold", }, header: { height: 48, - justifyContent: 'center', - alignItems: 'center', - borderBottomColor: '#2ecc71', + justifyContent: "center", + alignItems: "center", + borderBottomColor: "#2ecc71", borderBottomWidth: 2, -}, -header_title: { - color: '#333', + }, + header_title: { + color: "#333", fontSize: 24, - fontWeight: 'bold' -}, + fontWeight: "bold", + }, aheader: { height: headerViewHeight, - flexDirection: 'row', - borderBottomColor: '#2ecc71', + flexDirection: "row", + borderBottomColor: "#2ecc71", borderBottomWidth: 2, zIndex: 100, - backgroundColor: '#fff' -}, -aheader_img: { + backgroundColor: "#fff", + }, + aheader_img: { width: headerViewHeight * 0.6, height: headerViewHeight * 0.6, - resizeMode: 'cover', + resizeMode: "cover", borderRadius: headerViewHeight * 0.3, marginLeft: 16, marginTop: 10, -}, -aheader_context: { + }, + aheader_context: { marginLeft: 8, height: headerViewHeight * 0.4, - marginTop: 10 -}, -aheader_title: { - color: '#333', + marginTop: 10, + }, + aheader_title: { + color: "#333", fontSize: 20, marginBottom: 10, - fontWeight: 'bold' -}, -aheader_desc: { - color: '#444', + fontWeight: "bold", + }, + aheader_desc: { + color: "#444", fontSize: 16, - width: width - headerViewHeight * 0.6 - 32 -}, -abottom: { - justifyContent: 'center', - alignItems: 'center', + width: width - headerViewHeight * 0.6 - 32, + }, + abottom: { + justifyContent: "center", + alignItems: "center", height: bottomViewHeight, - backgroundColor: '#fff', + backgroundColor: "#fff", zIndex: 100, - borderTopColor: '#2ecc71', + borderTopColor: "#2ecc71", borderTopWidth: 2, -}, -abottom_desc: { - color: '#333', + }, + abottom_desc: { + color: "#333", fontSize: 20, - fontWeight: 'bold' -} + fontWeight: "bold", + }, }); ``` - - ## 约束与限制 ### 兼容性 @@ -539,7 +563,7 @@ abottom_desc: { ## API（AutoDragSortableView、DragSortableView） -**isRequired if there is a * in the name field** +**isRequired if there is a \* in the name field** > [!tip] "Platform"列表示该属性在原三方库上支持的平台。 @@ -547,29 +571,29 @@ abottom_desc: { > > 详情见 [react-native-drag-sort 源库地址](https://github.com/mochixuan/react-native-drag-sort) -| Name | Description | Type | Required | Platform | HarmonyOS Support | -| :----------------------: | :----------------------------------------------------------: | :------: | :------: | :---------: | :---------------: | -| **dataSource** * | | array | Yes | iOS/Android | Yes | -| **parentWidth** | parent width | number | No | iOS/Android | Yes | -| **childrenHeight** * | Each item height | number | Yes | iOS/Android | Yes | -| **childrenWidth** * | Each item width | number | Yes | iOS/Android | Yes | +| Name | Description | Type | Required | Platform | HarmonyOS Support | +| :----------------------: | :---------------------------------------------------------------------: | :------: | :------: | :---------: | :---------------: | +| **dataSource** \* | | array | Yes | iOS/Android | Yes | +| **parentWidth** | parent width | number | No | iOS/Android | Yes | +| **childrenHeight** \* | Each item height | number | Yes | iOS/Android | Yes | +| **childrenWidth** \* | Each item width | number | Yes | iOS/Android | Yes | | **marginChildrenTop** | So the item's outermost view adds margin, you can only use this method. | number | No | iOS/Android | Yes | -| **marginChildrenBottom** | | number | No | iOS/Android | Yes | -| **marginChildrenLeft** | | number | No | iOS/Android | Yes | -| **marginChildrenRight** | | number | No | iOS/Android | Yes | -| **sortable** | Do not allow dragging | bool | No | iOS/Android | Yes | -| **onClickItem** | click | function | No | iOS/Android | Yes | -| **onDragStart** | | function | No | iOS/Android | Yes | -| **onDragEnd** | | function | No | iOS/Android | Yes | -| **onDataChange** | This method is called every time the data changes. | function | No | iOS/Android | Yes | -| **renderItem** * | render item view | function | Yes | iOS/Android | Yes | -| **fixedItems** | no remove | array | No | iOS/Android | Yes | -| **keyExtractor** | (item,index) => key | function | No | iOS/Android | Yes | -| **delayLongPress** | | number | No | iOS/Android | Yes | -| **isDragFreely** | Whether to limit the drag space | bool | No | iOS/Android | Yes | -| **onDragging** | | function | No | iOS/Android | Yes | -| **maxScale** | | number | No | iOS/Android | Yes | -| **minOpacity** | | number | No | iOS/Android | Yes | +| **marginChildrenBottom** | | number | No | iOS/Android | Yes | +| **marginChildrenLeft** | | number | No | iOS/Android | Yes | +| **marginChildrenRight** | | number | No | iOS/Android | Yes | +| **sortable** | Do not allow dragging | bool | No | iOS/Android | Yes | +| **onClickItem** | click | function | No | iOS/Android | Yes | +| **onDragStart** | | function | No | iOS/Android | Yes | +| **onDragEnd** | | function | No | iOS/Android | Yes | +| **onDataChange** | This method is called every time the data changes. | function | No | iOS/Android | Yes | +| **renderItem** \* | render item view | function | Yes | iOS/Android | Yes | +| **fixedItems** | no remove | array | No | iOS/Android | Yes | +| **keyExtractor** | (item,index) => key | function | No | iOS/Android | Yes | +| **delayLongPress** | | number | No | iOS/Android | Yes | +| **isDragFreely** | Whether to limit the drag space | bool | No | iOS/Android | Yes | +| **onDragging** | | function | No | iOS/Android | Yes | +| **maxScale** | | number | No | iOS/Android | Yes | +| **minOpacity** | | number | No | iOS/Android | Yes | #### The following attributes belong only to AutoDragSortableView @@ -591,7 +615,7 @@ abottom_desc: { | Name | Description | Type | Required | Platform | HarmonyOS Support | | :-----------------------: | :-----------------------------------------------: | :------------------------------------------------------: | :------: | :---------: | :---------------: | -| **renderItem** * | render item view | function | Yes | iOS/Android | Yes | +| **renderItem** \* | render item view | function | Yes | iOS/Android | Yes | | **onDataChange** | This method is called every time the data changes | function | No | iOS/Android | Yes | | **renderHeaderView** | | element | No | iOS/Android | Yes | | **headerViewHeight** | | number | No | iOS/Android | Yes | @@ -609,7 +633,7 @@ abottom_desc: { | **childMarginRight** | | number | No | iOS/Android | Yes | | **autoThrottleDuration** | | number | No | iOS/Android | Yes | | **onDragEnd** | | function | No | iOS/Android | Yes | -| **dataSource** * | | array | Yes | iOS/Android | Yes | +| **dataSource** \* | | array | Yes | iOS/Android | Yes | | **keyExtractor** | (item,index) => key | function.isRequired | No | iOS/Android | Yes | ## 遗留问题 @@ -618,4 +642,4 @@ abottom_desc: { ## 开源协议 -本项目基于 [The Apache License (Apache)](https://github.com/mochixuan/react-native-drag-sort/blob/master/LICENSE) ，请自由地享受和参与开源。 \ No newline at end of file +本项目基于 [The Apache License (Apache)](https://github.com/mochixuan/react-native-drag-sort/blob/master/LICENSE) ，请自由地享受和参与开源。 diff --git a/1224/react-native-fs.md b/1224/react-native-fs.md index 594b64e1cf1ad1cfc752775d2e1186eed8ea4185..ea0fbdcce2db694a2d4b2d1b40559ade610d51dd 100644 --- a/1224/react-native-fs.md +++ b/1224/react-native-fs.md @@ -21,11 +21,11 @@ 进入到工程目录并输入以下命令： ->[!TIP] # 处替换为 tgz 包的路径 +> [!TIP] # 处替换为 tgz 包的路径 -#### npm +#### npm ```bash npm install @react-native-oh-tpl/react-native-fs@file:# @@ -41,103 +41,106 @@ yarn add @react-native-oh-tpl/react-native-fs@file:# 下面的代码展示了这个库的基本使用场景： ->[!WARNING] 使用时 import 的库名不变。 +> [!WARNING] 使用时 import 的库名不变。 ```tsx -import React , { useState } from 'react'; +import React, { useState } from "react"; import { - SafeAreaView, - StyleSheet, - ScrollView, - View, - Text, - StatusBar, - TextInput, - Button -} from 'react-native'; -import FS from 'react-native-fs'; -import { Colors} from 'react-native/Libraries/NewAppScreen'; + SafeAreaView, + StyleSheet, + ScrollView, + View, + Text, + StatusBar, + TextInput, + Button, +} from "react-native"; +import FS from "react-native-fs"; +import { Colors } from "react-native/Libraries/NewAppScreen"; function App(): React.JSX.Element { - // 参数 - const [mkdirParam, setMkdirParam] = useState(''); - // 创建文件夹接口调用 - const mkdirExample = () => { - FS.mkdir(FS.DocumentDirectoryPath + '/' + mkdirParam).then((result) => { - console.log('file mkdirParam： '+ mkdirParam); - console.log('file Successfully created directory.'); - }, err => { - console.error('file mkdir: '+ err.message) - }); - } - // 组件 - return ( - <> + // 参数 + const [mkdirParam, setMkdirParam] = useState(""); + // 创建文件夹接口调用 + const mkdirExample = () => { + FS.mkdir(FS.DocumentDirectoryPath + "/" + mkdirParam).then( + (result) => { + console.log("file mkdirParam： " + mkdirParam); + console.log("file Successfully created directory."); + }, + (err) => { + console.error("file mkdir: " + err.message); + }, + ); + }; + // 组件 + return ( + <> + style={styles.scrollView} + > {"React Native File Harmony Demo App"} - - {"mkdir"} - + {"mkdir"} - setMkdirParam(mkdirParam)} - placeholderTextColor = "#9a73ef" - autoCapitalize = "none" - /> + setMkdirParam(mkdirParam)} + placeholderTextColor="#9a73ef" + autoCapitalize="none" + /> -