@acflow/react-native-action-sheet 中文文档教程

Question

react-native-action-sheet

ActionSheet 是一个跨平台的 React Native 组件，它在 iOS 上使用本机 UIActionSheet，在 Android 上使用 JS 实现。 几乎是 ActionSheetIOS 的替代品，除了它不能被静态调用。

iOS	Android	Web

Installation

$ npm install @expo/react-native-action-sheet -S

或者

$ yarn add @expo/react-native-action-sheet

A basic ActionSheet Setup

1. Wrap your top-level component with <ActionSheetProvider />

import { ActionSheetProvider } from '@expo/react-native-action-sheet';

class AppContainer extends React.Component {
  render() {
    return (
      <ActionSheetProvider>
        <ConnectedApp />
      </ActionSheetProvider>
    );
  }
}

2. Connect your component which uses showActionSheetWithOptions.

import { connectActionSheet } from '@expo/react-native-action-sheet';

class App extends React.Component {
  /* ... */
}

const ConnectedApp = connectActionSheet(App);

export default ConnectedApp;

App 组件可以访问 actionSheet 方法作为 this.props.showActionSheetWithOptions

_onOpenActionSheet = () => {
  // Same interface as https://facebook.github.io/react-native/docs/actionsheetios.html
  const options = ['Delete', 'Save', 'Cancel'];
  const destructiveButtonIndex = 0;
  const cancelButtonIndex = 2;

  this.props.showActionSheetWithOptions(
    {
      options,
      cancelButtonIndex,
      destructiveButtonIndex,
    },
    (buttonIndex) => {
      // Do something here depending on the button index selected
    }
  );
};

如果您使用的是 React 16.8 或更新版本，您可以使用钩子而不是高阶组件。

import { useActionSheet } from '@expo/react-native-action-sheet';

export default function App() {
  const { showActionSheetWithOptions } = useActionSheet();
  /* ... */
}

Options

这个库的目标是尽可能地模仿原生的 iOS 和 Android ActionSheets。

这个库也可以在带有 Expo for web 的浏览器中使用。

Universal Props

React Native 的 ActionSheetIOS 组件上可用的相同选项适用于此库中的 iOS 和 Android。 注意：disabledButtonIndices 仅适用于 Expo 43+ 或 RN 0.64.0+ 中的 iOS。

iOS Only Props

Name	Type	Required	Default
anchor	number	No
userInterfaceStyle	string	No

anchor (optional)

仅 iPad 选项允许将操作表停靠到节点。 有关如何实现此功能的示例，请参阅 ShowActionSheetButton.tsx。

userInterfaceStyle (optional)

action sheet使用的界面风格，可以设置为light或dark，否则将使用默认的系统风格。

Android/Web-Only Props

以下道具允许修改 Android ActionSheet。 它们对 iOS 上的外观没有影响，因为本机 iOS 操作表没有用于修改这些选项的选项。

Name	Type	Required	Default
icons	array of required images or icons	No
tintIcons	boolean	No	true
textStyle	TextStyle	No
titleTextStyle	TextStyle	No
messageTextStyle	TextStyle	No
autoFocus	boolean	No	false
showSeparators	boolean	No	false
containerStyle	ViewStyle	No
separatorStyle	ViewStyle	No
useModal	boolean	No	false (true if autoFocus is true)
destructiveColor	string	No	#d32f2f

icons (optional)

显示图标以配合每个选项。 如果通过 require 提供图像源路径，将为您呈现图像。 或者，您可以提供一组元素，例如矢量图标、预渲染图像等

tintIcons (optional)

。默认情况下，图标将被着色以匹配文本颜色。 当设置为 false 时，图标将是源图像的颜色。 如果您想使用多色图标，这很有用。 如果您在 icons 数组中提供自己的节点/预渲染图标而不是所需的图像，则需要在将它们提供给 icons 数组之前对其进行适当的着色； tintColor 不会应用于图标，除非它们是来自所需来源的图像。

textStyle (optional)

将任何文本样式道具应用于选项。 如果提供了 tintColor 选项，则它优先于彩色文本样式道具。

titleTextStyle (optional)

将任何文本样式道具应用于标题（如果存在）。

messageTextStyle (optional)

如果存在，将任何文本样式道具应用于消息。

autoFocus: (optional)

如果为真，将在操作表可见时自动为第一个选项屏幕阅读器提供焦点。 在 iOS 上，这是本机操作表的默认行为。

showSeparators: (optional)

显示项目之间的分隔符。 在 iOS 上，分隔符始终显示，因此此属性无效。

containerStyle: (optional)

将任何视图样式道具应用于容器而不是使用默认外观（例如暗模式）。

separatorStyle: (optional)

修改分隔符的外观而不是使用默认外观。

useModal: (optional)

用 Modal 包裹 ActionSheet，以便在其他已打开的 Modal 前面显示 (issue参考)。

destructiveColor: (optional)

修改破坏性选项的文字颜色。

ActionSheetProvider Props

以下道具可以直接在 ActionSheetProvider

useNativeDriver (optional)

Windows 选项上直接设置，该选项提供禁用 native animation 驱动程序； Build-10.0.17763.0 及更早版本。 useNativeDriver 在版本 1903 及更高版本中受支持 所以如果你的项目是针对那个的，你不需要设置这个道具。

Try it out

在 Expo 中尝试：https://expo.io/@community/react-native-action-sheet-example

Example

请参阅 示例应用程序。

Usage

$ cd example
$ yarn

// build simulator
$ yarn ios
$ yarn android

// web
$ yarn web

Development

Setup

$ git clone git@github.com:expo/react-native-action-sheet.git
$ cd react-native-action-sheet
$ yarn

Build

我们使用 bob。

$ yarn build

Lint & Format

// tsc
$ yarn type-check

// ESLint + Prettier
$ yarn lint