反应-内在行动表

跨平台 ActionSheet. (原始内容存档于2012-10-12). 这个组件执行自定义的 ActionSheet ,并提供同样的方式来将它绘制在有缺陷的平台上(iOS和Android). 实际上,为了保持最佳效果,它仍然在iOS上使用ActionSheetIOS.

从 v3. 0. 0 开始, 具有类似本地 UI 的自定义 ActionSheet 可用并用作 iOS 的默认选项 :

Android通过路过也可以使用类似的UI theme="ios"数字 :

安装

npm i -S @alessiocancian/react-native-actionsheet

使用量

职能构成部分

import { useRef } from 'react'
import ActionSheet from '@alessiocancian/react-native-actionsheet'

const Demo = () => {
  const actionSheetRef = useRef()

  const showActionSheet = () => {
    actionSheetRef.current.show()
  }
  
  render() {
    return (
      <View>
        <Text onPress={showActionSheet}>Open ActionSheet</Text>
        <ActionSheet
          ref={actionSheetRef}
          title={'Which one do you like ?'}
          options={['Apple', 'Banana', 'cancel']}
          cancelButtonIndex={2}
          destructiveButtonIndex={1}
          onPress={(index) => { /* do something */ }}
        />
      </View>
    )
  }
}

类组件

import ActionSheet from '@alessiocancian/react-native-actionsheet'

class Demo extends React.Component {
  showActionSheet = () => {
    this.ActionSheet.show()
  }
  render() {
    return (
      <View>
        <Text onPress={this.showActionSheet}>Open ActionSheet</Text>
        <ActionSheet
          ref={o => this.ActionSheet = o}
          title={'Which one do you like ?'}
          options={['Apple', 'Banana', 'cancel']}
          cancelButtonIndex={2}
          destructiveButtonIndex={1}
          onPress={(index) => { /* do something */ }}
        />
      </View>
    )
  }
}

直接使用动作SheetCustom

您可以自定义选项和标题

import { ActionSheetCustom as ActionSheet } from '@alessiocancian/react-native-actionsheet'

const options = [
  'Cancel', 
  'Apple', 
  <Text style={{color: 'yellow'}}>Banana</Text>,
  'Watermelon', 
  <Text style={{color: 'red'}}>Durian</Text>
]

class Demo extends React.Component {
  showActionSheet = () => {
    this.ActionSheet.show()
  }
  render() {
    return (
      <View>
        <Text onPress={this.showActionSheet}>Open ActionSheet</Text>
        <ActionSheet
          ref={o => this.ActionSheet = o}
          title={<Text style={{color: '#000', fontSize: 18}}>Which one do you like?</Text>}
          options={options}
          cancelButtonIndex={0}
          destructiveButtonIndex={4}
          onPress={(index) => { /* do something */ }}
        />
      </View>
    )
  }
}

如何重新设计风格?

ActionSheet 的样式定义于 自由/风格.js我们可以通过 styles 覆盖默认样式的道具 。 见 示例 。 。 。 .

// example

const styles = {
  titleBox: {
    background: 'pink'
  },
  titleText: {
    fontSize: 16,
    color: '#000'
  }
}

<ActionSheet
  ...
  styles={styles}
/>

道具

https://github.com/alessiocancian/ react-native-actionsheet/blob/master/lib/options.js 互联网档案馆的存檔,存档日期2014-12-21