ios - react-native 中的模态底部菜单

Question

我如何为 react-native 创建一个像屏幕截图一样的菜单？

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>