Question

好，所以我想知道是否可以同时处理按钮的单击和叠加视图（触发onPress of Button和View / TouchableHighlight的触发）

因为不可能仅将两个对象放在另一个对象上，因为这使（zIndex上的）较高的对象可被单击，但两个对象却不能同时单击。

https://prntscr.com/p814jm“ React本机页面的屏幕截图”（代码结果）

代码：（我删除了一些功能以仅显示重要内容）


// ... Imports 

export default class TableConfig extends Component {

  state = {
    selected: -1,
    // Other States
  }

  select = id => {
    console.log('SELECTED: '+id);

    //Change Selected and the Text
    this.setState(() => ({ selected: id, selectedText: this.state.blocks[id].text }));
  }

  unselect = () => {
    console.log('UNSELECTED!');

    //Change State & Hide Component
    this.setState(()=>{});
  }

  render(){
    const { option } = this.state;
    let select = this.select;

    return(
      <View style={styles.container}>

        { /* The Overlay */ }
        <TouchableHighlight style={styles.full} onPress={()=>{this.unselect}}/>

        { /* That a Table of Buttons Basically (A grid of 2x2 Buttons) */ }
        <Card flat style={styles.all}>
          <View style={styles.row}>
            <TableBlock text={this.state.blocks[0].text} color={this.state.blocks[0].color} icon={this.state.blocks[0].icon} onClick={() => {select(0)}}/>
            <TableBlock text={this.state.blocks[1].text} color={this.state.blocks[1].color} icon={this.state.blocks[1].icon} onClick={() => {select(1)}}/>
          </View>
          <View style={styles.row}>
            <TableBlock text={this.state.blocks[2].text} color={this.state.blocks[2].color} icon={this.state.blocks[2].icon} onClick={() => {select(2)}}/>
            <TableBlock text={this.state.blocks[3].text} color={this.state.blocks[3].color} icon={this.state.blocks[3].icon} onClick={() => {select(3)}}/>
          </View>
        </Card>

        { /* This is the component that I want to hide select if the user clicked outside of this */}
        <Card flat row style={styles.bottom}>
          {
            (option=='none')?<TableConfigs handler={this.change}/>:
            (option=='color')?<ColorConfig handler={this.change} color={this.changeColor}/>:
            (option=='icon')?<IconConfig handler={this.change} modal={this.setVisibility}/>:
            (option=='text')?<TextConfig handler={this.change} text={this.state.selectedText} setText={this.setText}/>:
            (option=='audio')?<AudioConfig handler={this.change} editting={this.state.selected} recordTime={this.state.recordTime} changeTime={this.changeTime}/>:null
          }
        </Card>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  //Other Styles ...

  full: {
    position: 'absolute',
    left: 0,
    right: 0,
    top: 0,
    bottom: 0,
    width: '100%',
    height: '100%',
    backgroundColor: 'blue',
    opacity: 0.2,
    zIndex: 12,
    elevation: 20,
  },

});

Answer 1

为什么不将叠加层放在按钮下方？听起来更适合您的用例。这样，您既可以处理按钮的点击，也可以处理按钮外部的点击（覆盖图）

如何处理同时单击视图和按钮？

1 个答案: