探索React Native Actionsheet：一款强大的操作选项面板库

import React from 'react';
import { View, Text, StyleSheet, TouchableOpacity } from 'react-native';
import ActionSheet from 'react-native-actionsheet'; // 引入ActionSheet组件
 
export default class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      selectedOption: ''
    };
  }
 
  // 显示ActionSheet
  showActionSheet = () => {
    this.ActionSheet.show();
  };
 
  // 处理选项被选中的情况
  handlePress = (index, title) => {
    // 更新选中的选项
    this.setState({ selectedOption: title });
    // 模拟一个关闭ActionSheet的函数调用
    // 实际使用时，需要根据ActionSheet的API来关闭ActionSheet
    // this.ActionSheet.close();
  };
 
  render() {
    const { selectedOption } = this.state;
    const options = ['选项1', '选项2', '取消'];
 
    return (
      <View style={styles.container}>
        <TouchableOpacity onPress={this.showActionSheet}>
          <Text>点击显示ActionSheet</Text>
        </TouchableOpacity>
 
        <Text>选中的选项: {selectedOption}</Text>
 
        <ActionSheet
          ref={o => this.ActionSheet = o}
          options={options}
          cancelButtonIndex={2}
          onPress={this.handlePress}
        />
      </View>
    );
  }
}
 
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  }
});

这个代码示例展示了如何在React Native应用中使用react-native-actionsheet库来创建一个操作选项面板。代码中定义了一个App组件，其中包含显示ActionSheet和处理选项被选中的逻辑。当用户点击屏幕上的按钮时，会触发显示ActionSheet的函数，并在用户选择一个选项后更新选中的选项状态。