我如何通过本机反应实现此模态设计

Question

我正在尝试像下面的图像那样进行本机设计。如果有人在工具栏上进行过这种模态设计，请帮助我。

1

Answer 1

您将需要一个具有嵌入式TouchableOpacity的模块，并结合一些样式来进行定位。

请参阅此 https://snack.expo.io/SJrDAC8Qr

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

样式不是很好，但我想它可以满足您的要求