UI Kitten - Modal - 如何设置样式和设置大小、颜色等？答案

【问题标题】：UI Kitten - Modal - How to style and set size, color etc?UI Kitten - Modal - 如何设置样式和设置大小、颜色等？
【发布时间】：2020-06-22 20:30:29
【问题描述】：

我很想在我的应用中实现 UI Kitten 模式。我的模态工作得很好。我在设置模态框的长度、大小和颜色时遇到的问题。

<Modal
  visible={visible}
  backdropStyle={styles.backdrop}
  style={styles.modalContainer}
  ViewProps={styles.modalSize}>
  <Card disabled={true} header={modalHeader} footer={modalFooter}>
    {selectedType ? renderItemSelectedDetails() : ''}
  </Card>
</Modal>

我正在将此 CSS 样式传递给模态 ViewProps。

  modalSize: {
    width: '250px',
    height: '200px',
    backgroundColor: '#58B83E',
  },

无论我在这个 CSS 中传递什么，它都不会影响模态框的样式或大小。我做错了什么？

【问题讨论】：

我认为您需要将 modalSize 样式传递给 Cards 样式或 Modals 样式。我是这样设计的：<Modal backdropStyle={styles.backdrop} visible={visible}><Layout level='3' style={styles.modalContainer}> </Layout></Modal>
我想你在文档“...ViewProps - 应用于视图组件的任何道具。”中读到了它，但它不是道具，它是传播操作，你可以传递视图所拥有的任何道具传入视图。

标签： react-native react-native-ui-kitten

【解决方案1】：

您需要将样式传递给 Modals 的样式属性。

<Modal
  backdropStyle={styles.backdrop}
  style={styles.modalSize}
  visible={visible}>
    <Something />
</Modal>

此外，您可以将 Layout 添加为子项，并按照您想要的模式设置该布局的样式。（我更喜欢这个解决方案）

<Modal
  backdropStyle={styles.backdrop}
  visible={visible}>
  <Layout
    level='3'
    style={styles.modalSize}>
     <Something />
  </Layout>
</Modal>

【讨论】：