反應本機模式底部菜單

Question

如何創建反應本機屏幕截圖上的菜單？

Answer 1

你可以設置的backgroundColor： 'RGBA（0,0,0,0.2）'。

<Modal 
     animationType={"slide"} 
     transparent={false} 
     visible={this.state.modalVisible} 
     onRequestClose={() => {alert("Modal has been closed.")}} 

     > 

    <View style={{flex: 1,backgroundColor: 'rgba(0,0,0,0.2)'}}> 
     <View style ={{flex:1, alignItems: 'center', justifyContent: 'center'}}> 
      <View style={{backgroundColor: '#ffffff', width: 300, height: 300}}> 
       <Text>Hello World!</Text> 
      </View> 
     <TouchableHighlight 
      style={{backgroundColor: '#ffffff', width: 300, height: 40, marginTop: 40}} 
      onPress={() => {this.setModalVisible(!this.state.modalVisible)}} 
     > 
      <Text>Hide Modal</Text> 
     </TouchableHighlight> 

     </View> 
    </View> 
    </Modal>