React native 如何使用react native实现这种模态设计

我正在尝试使用react native进行下图所示的设计。如果有人在工具栏上使用过这种模式设计，请帮助我

---

您需要一个带有嵌入式TouchableOpacity的模态，并结合一些用于定位的样式

请参考这个

render（）{
返回(
this.setState（{displaymodel:true}）}/>
主要内容！
{/*模态代码*/}
{/*容器..单击此按钮将关闭模式*/}
this.setState（{displaymodel:false}}>
你好，世界！
);
}

不是很好的风格，但我想它做你想要的

 render() {
    return (
      <>
      <View>
        <Appbar.Header>
          <Appbar.Content title="Title" subtitle="Subtitle" />
          <Appbar.Action icon="search" onPress={() => this.setState({displayModal: true})} />
        </Appbar.Header>
        <View>
          <Text>Main content!</Text>
        </View>

      </View>
{/*Modal code*/}
       <Modal transparent={true} visible={this.state.displayModal}>
{/*Container .. clicking this closes the modal*/}
          <TouchableOpacity style={{flex:1}} onPress={() => this.setState({displayModal:false})}>
            <View style={{backgroundColor:'blue', position:'absolute', right:0, width:200, height: 200}}>
              <Text style={{color:'#ffffff'}}>Hello World!</Text>

            </View>
            </TouchableOpacity>
        </Modal>
      </>
    );
  }