OnLongPressポップアップでオプションのリストが反応するネイティブ

Question

ボタンを長く押すと、複数のオプションから選択できるポップアップが開く機能が追加されます。 TouchableHighlight（またはOpacity）のAFAIK onLongPressがレンダリング不可能なので、その小道具をレンダリングするコンポーネントがあるかどうかを知りたかったのです。私は状態を変更して別のビューを表示することができますが、背景をクリック（またはタップ）するとメニューが消えるように、メニューを透明にしたいと思います。

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);