Question

我试图做这种简单的弹出式菜单。当用户按照您的预期轻敲它时，我需要隐藏它。如何检测用户是否点击菜单以外我可以隐藏它？

class MainScreen extends Component {
    constructor(props){
    super(props);
    /*code...*/  

    this.state = {
        menuVisible: false
    }
}
render () {
    return (
        <View style={styles.container}>                                
            <View style={[styles.headerContainer]}> 
                /*This is the Menu Button*/
               <TouchableHighlight onPress={this.setState({ menuVisible: !this.state.menuVisible })} style={[styles.menuButton]}>
               </TouchableHighlight>                       
            </View>  

            <View style={[styles.labelContainer]}>                     
                /*irrelevant code here...*/
            </View> 
            /*Render the floating menu if the Menu Button has been tapped*/
            {this.state.menuVisible ? this.FloatingMenu() : null}     
        </View> 
    )
}

这是返回浮动菜单的方法：

/*Floating/Pop-up menu*/
FloatingMenu(){                 
    return(
        <View style={[styles.floatingMenu]}>
             <TouchableHighlight onPress={option1Handler}>
                   <Text>Menu option 1</Text>
             </TouchableHighlight>
             <TouchableHighlight onPress={option2Handler}>
                   <Text>Menu option 2</Text>
             </TouchableHighlight>
             <TouchableHighlight onPress={option3Handler}>
                   <Text>Menu option 3</Text>
             </TouchableHighlight>                 
        </View>
    )                   
}

......这些是风格：

container: { 
  flex: 1      
},      
headerContainer: { 
  flex: 1,
  flexDirection: 'row',
  alignItems: 'stretch',
  justifyContent: 'space-between'
},
labelContainer: { 
  flex: 7,
  alignItems: 'center'
},
floatingMenu: {
  position: 'absolute',
  right: 5,
  top: 5,
  opacity: 1,
  borderRadius: 2,
  padding: 5
}

我尝试在其他View容器上使用onStartShouldSetResponderCapture属性，例如<View style={[styles.labelContainer]} onStartShouldSetResponderCapture={this.setState({ menuVisible: false });}>，以便隐藏菜单，但是我必须将其添加到所有容器中，以便不会出现这种情况。 ; t似乎是正确的方法

React Native - 隐藏浮动菜单在触摸它之后查看

0 个答案: