diff --git a/vmall/react-native-SmartRefreshLayout.md b/vmall/react-native-SmartRefreshLayout.md
index b4180c005f98e766b2450c719820547f39695c90..a8d7265c64a88428d281608b8a0ac8b6e27b2740 100644
--- a/vmall/react-native-SmartRefreshLayout.md
+++ b/vmall/react-native-SmartRefreshLayout.md
@@ -17,9 +17,6 @@
进入到工程目录并输入以下命令：
-
-**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-SmartRefreshLayout/releases)中获取库 tgz，通过使用本地依赖来安装本库。**
-
#### **yarn**
```bash
@@ -37,76 +34,98 @@ npm install @react-native-oh-tpl/react-native-smartrefreshlayout
下面的代码展示了这个库的基本使用场景：
```js
-import React, { useState } from "react";
-import {
- View,
- Text,
- FlatList,
- StyleSheet,
- TouchableOpacity,
-} from "react-native";
-import {
- SmartRefreshControl,
- AnyHeader,
-} from "react-native-smartrefreshlayout";
+import React, { useState } from 'react';
+import { View, Text, FlatList, StyleSheet ,TouchableOpacity} from 'react-native';
+import { SmartRefreshControl,AnyHeader} from 'react-native-smartrefreshlayout';
const App = () => {
const [text, setText] = useState("状态");
+ const [text1, setText1] = useState("刷新时间");
+
+ const [headerHeight, setHeaderHeight] = useState(66);
+ const [color, setColor] = useState('#fff000');
+
+
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: 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' },
+
// ... more data ...
]);
+ const onLoadMore = () => {
+ // Simulate loading more data
+ setTimeout(() => {
+ setData([
+ ...data,
+ { id: data.length + 1, text: `New Item ${data.length + 1}` },
+ // ... more loaded data ...
+ ]);
+ }, 1000);
+ };
+
const renderItem = ({ item }) => (
{item.text}
);
- let smartRefreshControlRef: React.RefObject;
+ let smartRefreshControlRef:React.RefObject;
return (
-
- {
- smartRefreshControlRef.finishRefresh({ delayed: -1, success: true });
- }}
- >
-
- 点击完成刷新finish
-
-
+
+ {smartRefreshControlRef.finishRefresh({delayed:-1,success:true})}}>
+ finish
+
+
+
+ {setHeaderHeight(headerHeight == 66?132:66)}}>
+ 切换高度 66/132
+
-
+ {setColor(color === "#fff000"?"red":"#fff000")}}>
+ 切换颜色（正在刷新中不支持切换背景色）
+
+
+
{text}
-
- (smartRefreshControlRef = ref)}
- primaryColor={"#f3f3f3"}
- headerHeight={66}
- style={{ height: 500, width: "100%", backgroundColor: "#ffcc00" }}
- onHeaderMoving={(e) => {
- setText("onHeaderMoving" + JSON.stringify(e.nativeEvent));
- }}
- HeaderComponent={
-
- 刷新头
-
+
+
+ {text1}
+
+ smartRefreshControlRef=ref}
+ primaryColor={color}
+ headerHeight={headerHeight}
+ style={{ height:500,width:'100%',backgroundColor:"#ffcc00"}}
+ onHeaderMoving={(e)=>{
+ setText('onHeaderMoving' + JSON.stringify(e.nativeEvent))
+ }}
+ onRefresh={
+ ()=>{
+ setText1('时间：' + new Date().getTime() + "onRefresh触发刷新")
}
- >
- item.id.toString()}
- />
-
+ }
+ HeaderComponent={
+ {text}
+ }
+
+ >
+ item.id.toString()}
+ />
+
);
};
@@ -114,10 +133,14 @@ const App = () => {
const styles = StyleSheet.create({
item: {
padding: 16,
- width: "100%",
- height: 100,
+ borderBottomWidth: 1,
+ borderBottomColor: '#ccc',
+ width:100,
+ height:100,
},
});
+
+export default App;
```
## Link
@@ -236,26 +259,26 @@ import { createRNPackages } from '../RNPackagesFactory'
@Builder
function CustomComponentBuilder(ctx: ComponentBuilderContext) {
- if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) {
+ if (ctx.componentName === SAMPLE_VIEW_TYPE) {
SampleView({
ctx: ctx.rnohContext,
- tag: ctx.descriptor.tag,
+ tag: ctx.tag,
buildCustomComponent: CustomComponentBuilder
})
}
-+ else if (ctx.descriptor.type == SMART_REFRESH_CONTROL_TYPE){
++ else if (ctx.componentName == SMART_REFRESH_CONTROL_TYPE){
+ SmartRefreshControl({
+ ctx: ctx.rnohContext,
+ tag: ctx.tag,
+ buildCustomComponent: CustomComponentBuilder
+ })
-+ } else if (ctx.descriptor.type == ANY_HEADER_TYPE){
++ } else if (ctx.componentName == ANY_HEADER_TYPE){
+ RNCAnyHeader({
+ ctx: ctx.rnohContext,
+ tag: ctx.tag,
+ buildCustomComponent: CustomComponentBuilder
+ })
-+ } else if (ctx.descriptor.type == DEFAULT_HEADER_TYPE) {
++ } else if (ctx.componentName == DEFAULT_HEADER_TYPE) {
+ RNCDefaultHeader({
+ ctx: ctx.rnohContext,
+ tag: ctx.tag,
diff --git a/vmall/react-native-fast-image.md b/vmall/react-native-fast-image.md
index 8924d12247c8906bfad44317e6308166ab25d784..4631f90d5ccb38fb5d61b6536559dc94a899c55e 100644
--- a/vmall/react-native-fast-image.md
+++ b/vmall/react-native-fast-image.md
@@ -18,8 +18,6 @@
-**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-fast-image/releases)中获取库 tgz，通过使用本地依赖来安装本库。**
-
#### **yarn**
```bash
@@ -159,14 +157,14 @@ std::vector> PackageProvider::getPackages(Package::Cont
@Builder
function CustomComponentBuilder(ctx: ComponentBuilderContext) {
- if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) {
+ if (ctx.componentName === SAMPLE_VIEW_TYPE) {
SampleView({
ctx: ctx.rnohContext,
- tag: ctx.descriptor.tag,
+ tag: ctx.tag,
buildCustomComponent: CustomComponentBuilder
})
}
-+ else if (ctx.descriptor.type === FAST_IMAGE_TYPE) {
++ else if (ctx.componentName === FAST_IMAGE_TYPE) {
+ RNFastImage({
+ ctx: ctx.rnohContext,
+ tag: ctx.tag,
diff --git a/vmall/react-native-gesture-handler.md b/vmall/react-native-gesture-handler.md
index bbfba6757d29a542869838226313e500709f2bbd..475ee201ccfe18d80df6dea21fd1cc7628f54a7d 100644
--- a/vmall/react-native-gesture-handler.md
+++ b/vmall/react-native-gesture-handler.md
@@ -211,10 +211,10 @@ react-native-gesture-handler 在 2.x 版本里，不再从原生端引入 ` 模板版本：v0.0.1
+> 模板版本：v0.1.1
react-native-safe-area-context
@@ -18,18 +18,16 @@
-**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-safe-area-context/releases)中获取库 tgz，通过使用本地依赖来安装本库。**
-
#### **yarn**
```bash
-yarn add xxx
+yarn add @react-native-oh-tpl/react-native-safe-area-context
```
#### **npm**
```bash
-npm install xxx
+npm install @react-native-oh-tpl/react-native-safe-area-context
```
@@ -79,7 +77,7 @@ export default App;
```json
"dependencies": {
"rnoh": "file:../rnoh",
- "rnoh-safe-area": "file:../../node_modules/react-native-safe-area-context/harmony/safe_area.har"
+ "rnoh-safe-area": "file:../../node_modules/@react-native-oh-tpl/react-native-safe-area-context/harmony/safe_area.har"
}
```
@@ -98,7 +96,7 @@ ohpm install
```json
"dependencies": {
"rnoh": "file:../rnoh",
- "rnoh-safe-area": "file:../../node_modules/react-native-safe-area-context/harmony/safe_area"
+ "rnoh-safe-area": "file:../../node_modules/@react-native-oh-tpl/react-native-safe-area-context/harmony/safe_area"
}
```
@@ -172,28 +170,28 @@ import {
} from 'rnoh'
import { SampleView, SAMPLE_VIEW_TYPE, PropsDisplayer } from "rnoh-sample-package"
import { createRNPackages } from '../RNPackagesFactory'
-+ import { SAFE_AREA_TYPE, RNCSafeAreaView, SAFE_AREA_PROVIDER_TYPE, SafeAreaProvider } from "rnoh-safe-area"
++ import { SAFE_AREA_VIEW_TYPE, SafeAreaView, SAFE_AREA_PROVIDER_TYPE, SafeAreaProvider } from "rnoh-safe-area"
@Builder
function CustomComponentBuilder(ctx: ComponentBuilderContext) {
- if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) {
+ if (ctx.componentName === SAMPLE_VIEW_TYPE) {
SampleView({
ctx: ctx.rnohContext,
- tag: ctx.descriptor.tag,
+ tag: ctx.tag,
buildCustomComponent: CustomComponentBuilder
})
}
-+ else if (ctx.descriptor.type === SAFE_AREA_TYPE) {
-+ RNCSafeAreaView({
++ else if (ctx.componentName === SAFE_AREA_VIEW_TYPE) {
++ SafeAreaView({
+ ctx: ctx.rnohContext,
-+ tag: ctx.descriptor.tag,
++ tag: ctx.tag,
+ buildCustomComponent: CustomComponentBuilder
+ })
+ }
-+ else if (ctx.descriptor.type === SAFE_AREA_PROVIDER_TYPE) {
++ else if (ctx.componentName === SAFE_AREA_PROVIDER_TYPE) {
+ SafeAreaProvider({
+ ctx: ctx.rnohContext,
-+ tag: ctx.descriptor.tag,
++ tag: ctx.tag,
+ buildCustomComponent: CustomComponentBuilder
+ })
+ }
diff --git a/vmall/react-native-tab-view.md b/vmall/react-native-tab-view.md
index 533cf3ea188077370ffe3908233c7d9df05fb13e..2925b220ec1654062fad0d184bdc87152f03d803 100644
--- a/vmall/react-native-tab-view.md
+++ b/vmall/react-native-tab-view.md
@@ -280,11 +280,11 @@ function CustomComponentBuilder(ctx: ComponentBuilderContext) {
if (ctx.componentName === SAMPLE_VIEW_TYPE) {
SampleView({
ctx: ctx.rnohContext,
- tag: ctx.descriptor.tag,
+ tag: ctx.tag,
buildCustomComponent: CustomComponentBuilder
})
}
-+ else if(ctx.descriptor.type === PAGER_VIEW_TYPE){
++ else if(ctx.componentName === PAGER_VIEW_TYPE){
+ RNCViewPager({
+ tag:ctx.descriptor.tag,
+ ctx:ctx.rnohContext,
diff --git a/vmall/react-native-video.md b/vmall/react-native-video.md
index 4e3dd14841966dad657961822ca68e6d2def8529..90123e4d84415cc2f259dbcd7a08b31af2e796c8 100644
--- a/vmall/react-native-video.md
+++ b/vmall/react-native-video.md
@@ -18,8 +18,6 @@
-**正在 npm 发布中，当前请先从仓库[Release](https://github.com/react-native-oh-library/react-native-video/releases)中获取库 tgz，通过使用本地依赖来安装本库。**
-
#### **yarn**
```bash
@@ -42,7 +40,6 @@ import {View, ScrollView, StyleSheet, Text,TextInput} from 'react-native';
import RNCVideo from 'react-native-video'
function RNCVideoDemo() {
- const videoRef = React.useRef(null);
const [muted, setMuted] = useState(true);
const [paused, setPaused] = useState(false);
@@ -63,20 +60,119 @@ function RNCVideoDemo() {
const [onPlaybackStalled, setOnPlaybackStalled] = useState("onPlaybackStalled");
const [onPlaybackResume, setOnPlaybackResume] = useState("onPlaybackResume");
+ const scrollRef = React.useRef(null);
+ const videoRef = React.useRef(null);
+
+ const toggleMuted = () => {
+ setMuted((prevMuted) => !prevMuted);
+ };
+
+ const togglePaused = () => {
+ setPaused((prevPaused) => !prevPaused);
+ };
+
+ const toggleRepeat = () => {
+ setRepeat((prevRepeat) => !prevRepeat);
+ };
+
+ const toggleDisableFocus = () => {
+ setDisableFocus((prevDisableFocus) => !prevDisableFocus);
+ };
+
+ const firstVideo = () => {
+ setUri((prevRepeat) => 'https://vjs.zencdn.net/v/oceans.mp4');
+ };
+
+ const secondVideo = () => {
+ // setUri((prevRepeat) => 'http://clips.vorwaerts-gmbh.de/big_buck_bunny.mp4');
+ setUri((prevRepeat) => 'https://res.vmallres.com//uomcdn/CN/cms/202210/C75C7E20060F3E909F2998E13C3ABC03.mp4');
+ };
+
+ const changeResizeMode = (resizeMode) => {
+ setResizeMode((prevResizeMode) => resizeMode);
+ };
+
return (
-
+
+ 网络视频demo
+ {onVideoLoad}
+ {onVideoError}
+ {onVideoLoadStart}
+ {onVideoProgress}
+ {onVideoEnd}
+ {onVideoBuffer}
+ {onPlaybackStalled}
+ {onPlaybackResume}
+ update source
+
+ {
+ setUri( 'https://res.vmallres.com//uomcdn/CN/cms/202210/C75C7E20060F3E909F2998E13C3ABC03.mp4');
+ setPosterResizeMode("stretch");
+ }}>切换net:vmallres
+ {
+ setUri('https://vjs.zencdn.net/v/oceans.mp4');
+ setPosterResizeMode("contain");
+ }}>切换net:oceans
+
+ set resizeMode
+
+ { setResizeMode("none");}} >none
+ { setResizeMode("contain");}} >contain
+ { setResizeMode("stretch");}} >stretch
+ { setResizeMode("cover");}} >cover
+
+
+ 操作
+ {
+ const newText = text.replace(/[^\d]+/, '');
+ setSeekSec(Number(newText))
+ }}
+ autoFocus={false}
+ />
+
+
- { videoRef.current?.seek(5)}} >seek:5s
-
- { videoRef.current?.seek(seekSec)}} >seek:{seekSec.toString()}
+ { togglePaused()}} >paused:{paused.toString()}
+ { toggleMuted() }} >muted:{muted.toString()}
+ { toggleRepeat() }} >repeat:{repeat.toString()}
+ { toggleDisableFocus() }} >disableFocus:{disableFocus.toString()}
+ ReSizeMode:{resizeMode.toString()}
+
+ {
- console.log(`onLoad`)
+ setOnVideoLoad("onVideoLoad currentTime =" + e.currentPosition + "s duration =" + e.duration + "s width =" + e.naturalSize.width+ " orientation =" + e.naturalSize.orientation)
+ setOnVideoError("onVideoError error = ok" )
}}
onLoadStart={(e) => {
- console.log(`onLoadStart`)
+ setOnVideoLoadStart("onVideoLoadStart isNetwork =" + e.isNetwork + " type=" + e.type + " uri=" + e.uri)
}}
onProgress={(e) => {
- console.log(`onProgress`)
+ setOnVideoProgress("onVideoProgress currentTime =" + e.currentTime + " playableDuration=" + e.playableDuration + " seekableDuration=" + e.seekableDuration)
}}
onError={(e) => {
- console.log(`onError`)
+ setOnVideoError("onVideoError error =" + e.error)
}}
onEnd={() => {
- console.log(`onEnd`)
+ setOnVideoEnd("onVideoEnd completed")
}}
onBuffer={(e) => {
- console.log(`onBuffer`)
+ setOnVideoBuffer("onVideoBuffer :"+ e.isBuffering)
}}
onPlaybackStalled={() => {
- console.log(`onPlaybackStalled`)
+ setOnPlaybackStalled("onPlaybackStalled : true")
+ setOnPlaybackResume("onPlaybackResume :false")
}}
onPlaybackResume={() => {
- console.log(`onPlaybackResume`)
+ setOnPlaybackStalled("onPlaybackStalled :false")
+ setOnPlaybackResume("onPlaybackResume :true")
}}
onReadyForDisplay={() => {
- console.log(`onReadyForDisplay`)
+ console.log(`onReadyForDisplay :setShowPoster(false)`)
}}
>
- );
+
+
+ );
}
+
const styles = StyleSheet.create({
video: {
width: '100%',
height: 260,
- },
+},
+ container: {
+ width: '100%',
+ height: '100%',
+ backgroundColor: '#333',
+ },
+ title: {
+ color: 'white',
+ width: '30%', // hack
+ height: 30, // hack
+ },
+ label: {
+ color: 'gray',
+ width: '100%', // hack
+ minHeight:20
+ },
+ labelB: {
+ color: 'gray',
+ width: '100%', // hack
+ minHeight:40
+ },
button: {
+ width: 160,
+ height: 36,
+ backgroundColor: 'hsl(190, 50%, 70%)',
+ paddingHorizontal: 16,
+ paddingVertical: 8,
+ borderRadius: 8,
+ },
+ buttonText: {
+ width: '100%',
+ height: '100%',
+ fontWeight: 'bold',
+ },
+ button_b: {
paddingHorizontal: 8,
paddingVertical: 6,
borderRadius: 4,
@@ -133,7 +268,15 @@ const styles = StyleSheet.create({
minHeight:20,
textAlign: "center",
},
- });
+ prop_input:{
+ width:160,
+ height:40,
+ borderWidth:1,
+ backgroundColor:'white',
+ color:"black",
+ borderRadius: 8,
+ },
+});
export default RNCVideoDemo;
```
@@ -254,14 +397,14 @@ import { createRNPackages } from '../RNPackagesFactory'
@Builder
function CustomComponentBuilder(ctx: ComponentBuilderContext) {
- if (ctx.descriptor.type === SAMPLE_VIEW_TYPE) {
+ if (ctx.componentName === SAMPLE_VIEW_TYPE) {
SampleView({
ctx: ctx.rnohContext,
- tag: ctx.descriptor.tag,
+ tag: ctx.tag,
buildCustomComponent: CustomComponentBuilder
})
}
-+ else if (ctx.descriptor.type === RNC_VIDEO_TYPE) {
++ else if (ctx.componentName === RNC_VIDEO_TYPE) {
+ RNCVideo({
+ ctx: ctx.rnohContext,
+ tag: ctx.tag,