open-index/open-npm huggingface dataset:
npm package: @sdcx/activity-indicator
Description: A native activity indicator for React Native
Author: sdcx
Latest version: 1.0.2

# ActivityIndicator

`ActivityIndicator` 是一个 React Native 原生 UI 组件，是一个菊花转圈的动画。

<img src="https://raw.githubusercontent.com/sdcxtech/react-native-troika/master/packages/activity-indicator/docs/assets/activity.png" width="320">

## 版本兼容

| 版本 | RN 版本 | RN 架构 |
| ---- | ------- | ------- |
| 0.x  | < 0.82  | 旧架构  |
| 1.x  | >= 0.82 | 新架构  |

## Installation

```bash
yarn add @sdcx/activity-indicator
```

## Usage

```tsx
import ActivityIndicator from '@sdcx/activity-indicator';

function App() {
	return (
		<View style={styles.container}>
			<ActivityIndicator />
		</View>
	);
}
```

## Props

基本与 RN 的 [ActivityIndicator](https://reactnative.dev/docs/activityindicator) 一致。
npm package: @sdcx/image-crop
Description: A React Native ui component for image crop.
Author: sdcx
Latest version: 1.0.2

# ImageCropView

`ImageCropView` 是一个 React Native 原生 UI 组件，用于头像裁剪以及图片裁剪，同时支持图像主体识别后设置需要裁剪的主体区域。

## 版本兼容

| 版本 | RN 版本 | RN 架构 |
| ---- | ------- | ------- |
| 0.x  | < 0.82  | 旧架构  |
| 1.x  | >= 0.82 | 新架构  |

## Installation

```bash
yarn add @sdcx/image-crop
# &
cd ios && bundle exec pod install
```

## Usage

```tsx
<ImageCropView
  ref={imageCropViewRef}
  style={'your style'}
  fileUri={'your file uri'}
  cropStyle={'circular' | 'default'}
  onCrop={(uri: string) => {}}
  objectRect={objectRect}
/>
```

#### cropStyle

默认 default 为裁剪矩形，若需要裁剪圆形头像，则设为 circular；

#### objectRect

objectRect 可设置默认的图片裁剪区域，且当 cropStyle 为 default 时有效。

objectRect 的四个属性分别是（单位都是像素 px）：

1. left: 裁剪区域离图片左边的距离；
2. top: 裁剪区域离图片上边的距离；
3. width: 裁剪区域的宽度；
4. height: 裁剪区域的高度；

#### 裁剪

```
imageCropViewRef.crop()
```

然后裁剪成功后会在 onCropped 属性中回调裁剪后图片的 uri；
npm package: @sdcx/nested-scroll
Description: A react-native NestedScrollView component.
Author: sdcx
Latest version: 1.0.6

# NestedScrollView

`NestedScrollView` 是一个 React Native 原生 UI 组件。

主要用来实现如下结构的视图：

![README-2023-10-30-15-06-11](https://raw.githubusercontent.com/sdcxtech/react-native-troika/master/packages/nested-scroll/docs/assets/struct.png)

最外层是一个可纵向滚动的视图， 也就是我们的 `NestedScrollView`， 它的子组件往往由一个头部和一个可横向滚动的视图组成。

这个可横向滚动的视图在 React Native 中通常是设置了 `horizontal` 属性的 `ScrollView`，也可以是 `PagerView`。

最里层是若干也可以纵向滚动的视图，譬如 `ScrollView`、`FlashList`、`WebView` 等等。

`NestedScrollView` 的作用是协调最里层和最外层可滚动视图之间的（纵向）滚动，使得滚动体验更加流畅。

|                                                                                                                                             |                                                                                                                                               |
| ------------------------------------------------------------------------------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------- |
| <img src="https://raw.githubusercontent.com/sdcxtech/react-native-troika/master/packages/nested-scroll/docs/assets/sticky.gif" width="320"> | <img src="https://raw.githubusercontent.com/sdcxtech/react-native-troika/master/packages/nested-scroll/docs/assets/parallax.gif" width="320"> |

## 版本兼容

| 版本 | RN 版本 | RN 架构 |
| ---- | ------- | ------- |
| 0.x  | < 0.82  | 旧架构  |
| 1.x  | >= 0.82 | 新架构  |

## Installation

```sh
yarn add @sdcx/nested-scroll
# &
pod install
```

## Usage

`NestedScrollView` 在使用上比较简单

```tsx
import { NestedScrollView, NestedScrollViewHeader } from '@sdcx/nested-scroll';

const App = () => {
  return (
    <NestedScrollView>
      <NestedScrollViewHeader stickyHeaderBeginIndex={1}>
        <Image />
        <TabBar />
      </NestedScrollViewHeader>
      <PagerView>
        <FlatList nestedScrollEnabled />
        <ScrollView nestedScrollEnabled />
        <WebView />
      </PagerView>
    </NestedScrollView>
  );
};
```

> :exclamation: :exclamation: :exclamation:
> Android 是基于 [NestedScrolling API](https://developer.android.com/reference/androidx/core/view/NestedScrollingChild) 实现的。
>
> <h3>请记得为你的列表开启 `nestedScrollEnabled` 属性。</h3>
>
> :exclamation: :exclamation: :exclamation:

## API

### NestedScrollView

`NestedScrollView` 只有两个属于自己的属性

- `bounces`：仅限于 iOS 平台，用于设置 `NestedScrollView` 是否有弹性，默认为 `false`。一旦设置为 `true`，最内层可滚动视图将失去弹性。

- `contentContainerStyle`：仅限于 Android 平台，用于设置 `NestedScrollView` 的 contentView 的样式。

### NestedScrollViewHeader

- `stickyHeaderBeginIndex`，它表示从第几个子组件开始，子组件将会被固定在顶部。

- `stickyHeaderHeight`，它表示 header 多高的区域将会被固定在顶部，优先级高于 `stickyHeaderBeginIndex`。

- `onScroll`， 是一个回调函数，可用于实现头部视图的视差效果。

  ```ts
  type OnScroll = (event: {
    nativeEvent: {
      contentOffset: {
        x: number;
        y: number;
      };
    };
  }) => void;
  ```
npm package: @sdcx/nested-scroll-webview
Description: A React Native Webview that supports nested scrolling.
Author: sdcx
Latest version: 1.0.1

# NestedScrollWebView

`NestedScrollWebView` 为 react-native-webview 提供纵向嵌套滚动支持。

因为社区的 [react-native-webview](https://github.com/react-native-webview/react-native-webview) 并没有完全遵循 Android [NestedScrolling API](https://developer.android.com/reference/androidx/core/view/NestedScrollingChild)，导致在嵌套滚动的场景下，WebView 无法正常滚动。

本库修补了这个缺陷。

## 版本兼容

| @sdcx/nested-scroll-webview | react-native-webview | RN 架构 |
| --------------------------- | -------------------- | ------- |
| 0.3                         | 11                   | 旧      |
| 0.4                         | 13                   | 旧      |
| 1.x                         | 13                   | 新      |

## Installation

```sh
yarn add react-native-webview
yarn add @sdcx/nested-scroll-webview
```

## Usage

因为是补丁，要确保 @sdcx/nested-scroll-webview 在 react-native-webview 之后装配。

1.  在 java 代码中，新建一个 `Package` 类，也可以使用项目现成的。

    在该类中，实现 `ReactPackage` 接口，返回 `RNCNestedScrollWebViewManager`。

    ```java
    package com.example.myuidemo;

    import com.reactnativecommunity.webview.RNCNestedScrollWebViewManager;
    import java.util.Arrays;

    public class MyUiPackage implements ReactPackage {
        @NonNull
        @Override
        public List<NativeModule> createNativeModules(@NonNull ReactApplicationContext reactContext) {
            return Collections.emptyList();
        }

        @NonNull
        @Override
        public List<ViewManager> createViewManagers(@NonNull ReactApplicationContext reactContext) {
            return Arrays.asList(
                    new RNCNestedScrollWebViewManager()
            );
        }
    }
    ```

2.  在 `MainApplication.java` 中，将该 `Package` 添加到 `getPackages()` 方法中。

    ```java
    @Override
    protected List<ReactPackage> getPackages() {
    	@SuppressWarnings("UnnecessaryLocalVariable")
    	List<ReactPackage> packages = new PackageList(this).getPackages();
    	packages.add(new MyUiPackage());
    	return packages;
    }
    ```

## 如果是新架构，需要额外添加一个补丁

参考 patch-package

react-native-webview+13.16.0.patch

```diff
diff --git a/node_modules/react-native-webview/android/src/newarch/com/reactnativecommunity/webview/RNCWebViewManager.java b/node_modules/react-native-webview/android/src/newarch/com/reactnativecommunity/webview/RNCWebViewManager.java
index 4709e28..3fd284f 100644
--- a/node_modules/react-native-webview/android/src/newarch/com/reactnativecommunity/webview/RNCWebViewManager.java
+++ b/node_modules/react-native-webview/android/src/newarch/com/reactnativecommunity/webview/RNCWebViewManager.java
@@ -63,6 +63,10 @@ public class RNCWebViewManager extends ViewGroupManager<RNCWebViewWrapper>
         return mRNCWebViewManagerImpl.createViewInstance(context);
     }

+	protected RNCWebViewWrapper createViewInstance(@NonNull ThemedReactContext context, RNCWebView webView) {
+		return mRNCWebViewManagerImpl.createViewInstance(context, webView);
+	}
+
     @Override
     @ReactProp(name = "allowFileAccess")
     public void setAllowFileAccess(RNCWebViewWrapper view, boolean value) {

```
npm package: @sdcx/overlay
Description: A react-native Overlay component.
Author: sdcx
Latest version: 1.0.3

# Overlay

`Overlay` 是一个 React Native 原生 UI 基础设施，它漂浮在你的 React Native 应用之上，可用于实现 Modal, Alert, Toast, Popover, Notification, Hoverball 等顶层 UI。

> 这个库属于实验性质，请谨慎使用

## 版本兼容

| 版本 | RN 版本 | RN 架构 |
| ---- | ------- | ------- |
| 0.x  | < 0.82  | 旧架构  |
| 1.x  | >= 0.82 | 新架构  |

## Installation

```bash
yarn add @sdcx/overlay
# &
pod install
```

在你的项目更目录下添加或修改 react-native.config.js 文件，内容如下：

```js
// react-native.config.js
module.exports = {
  dependencies: {
    '@sdcx/overlay': {
      platforms: {
        android: {
          packageInstance: 'new OverlayPackage(getReactNativeHost())',
        },
      },
    },
  },
};
```

## Usage

请查看 Hoverball 示例代码
npm package: @sdcx/wheel-picker
Description: A React Native Wheel Picker ui component.
Author: sdcx
Latest version: 1.0.5

# WheelPicker

一个非常简单的 WheelPicker

一个非常帅的 WheelPicker

<img src="https://raw.githubusercontent.com/sdcxtech/react-native-troika/master/packages/wheel-picker/docs/assets/wheelpicker.png" width="320">

## 版本兼容

| 版本 | RN 版本 | RN 架构 |
| ---- | ------- | ------- |
| 0.x  | < 0.82  | 旧架构  |
| 1.x  | >= 0.82 | 新架构  |
npm package: @sdcxp/eslint-config-mina
Description: ESLint config for Wechat Miniprogram
Latest version: 1.0.0

# eslint-config-mina

## Installation

```
yarn add -D @sdcxp/eslint-config-mina
```

_Note: We're using `yarn` to install deps. Feel free to change commands to use `npm` 3+ and `npx` if you like_

## Usage

Add to your eslint config (`.eslintrc.js`, or `eslintConfig` field in `package.json`):

```js
module.exports = {
  root: true,
  extends: ['@sdcxp/mina', 'plugin:prettier/recommended']
};
```

为了支持可选链，需要为 VS Code 安装 JavaScript and TypeScript Nightly 插件
npm package: @sdcxp/eslint-config-react-native
Description: ESLint config for React Native
Latest version: 1.0.3

# eslint-config-react-native

## Installation

```
yarn add -D @sdcxp/eslint-config-react-native
```

_Note: We're using `yarn` to install deps. Feel free to change commands to use `npm` 3+ and `npx` if you like_

## Usage

Add to your eslint config (`.eslintrc.js`, or `eslintConfig` field in `package.json`):

```js
module.exports = {
  root: true,
  extends: ['@sdcxp/react-native', 'plugin:prettier/recommended', 'prettier/react']
};
```

为了支持可选链，需要为 VS Code 安装 JavaScript and TypeScript Nightly 插件