javascript - 带有选项列表的 OnLongPress 弹出窗口

Question

我想给一个按钮添加一个功能，长按会打开一个弹出窗口，用户可以从多个选项中进行选择。我想知道是否有任何组件可以渲染该 Prop ，因为据我所知，TouchableHighlight(或不透明度)的 onLongPress 不可渲染。我知道我可以更改状态并显示另一个 View ，但我想让菜单透明，以便在背景上单击(或点击)会导致菜单消失。

Answer 1

react-native-popover项目看起来可能是您的一个选择。需要注意的是，我不确定目前它的维护情况如何。例如，当前版本是 0.3.0，但只有 0.2.0 发布到 npm。要在此期间更正该问题，请参阅此 issue .

至少，您至少可以查看此代码，因为它完成了我认为您所追求的目标。这是一个从项目站点扩展的代码示例，它在具有透明背景的按钮上创建一个弹出框组件。点击背景时，弹出窗口关闭。

import React from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  TouchableOpacity,
  View
} from 'react-native';

import Popover from 'react-native-popover';

class MyApp extends React.Component {
  constructor (props) {
    super(props);

    this.onLongPress = this.onLongPress.bind(this);
    this.onClose = this.onClose.bind(this);

    this.state = {
      isVisible: false,
      buttonRect: {}
    }
  }

  onLongPress () {
    this._button.measure((ox, oy, width, height, px, py) => {
      this.setState({
        isVisible: true,
        buttonRect: {x: px, y: py, width: width, height: height}
      });
    });
  }

  onClose () {
    this.setState({ isVisible: false });
  }

  render () {
    return (
      <View style={styles.container}>
        <TouchableOpacity
          ref={(component) => this._button = component}
          style={styles.button}
          onLongPress={this.onLongPress}>
          <Text>Long Press Me</Text>
        </TouchableOpacity>

        <Popover
          isVisible={this.state.isVisible}
          fromRect={this.state.buttonRect}
          onClose={this.onClose}
          backgroundStyle={styles.popoverBackground}>
          <Text>I'm the content of this popover!</Text>
        </Popover>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },

  button: {
    backgroundColor: '#ddd',
    padding: 20
  },

  popoverBackground: {
    backgroundColor: 'rgba(0,0,0,0)'
  }
});

AppRegistry.registerComponent('MyApp', () => MyApp);