React Native 是否可以覆盖NativeBase的主题大小以获得rem单位？

jhkqcmku 于 2022-12-19 发布在 React

关注(0)|答案(1)|浏览(144)

我是NativeBase的新手，我正在覆盖默认主题以获得一个自定义主题，其中我希望使用rem单位。我正在使用extendTheme函数作为described in the docs：

const myCustomTheme = extendTheme({
  sizes: {
    0: 0,
    1: 16,
    2: 32,
    // and so on
  }
})

但是，如果我尝试在元素中使用它，大小保持不变。
目前我创建了一个变通方案，使用一个函数来模拟相同的效果：

const rem = (r: number) => `${r * 16}px`

所以我可以

<Button mb={rem(2)}>My Button</Button>

但是这个用起来不是很好。
您知道如何以类似的方式使用rem单位，而不需要此函数，语法如下

<Button mb={2}>My Button</Button>

或者像这样更好

<Button mb="2rem">My Button</Button>

使用雷姆单位的吗

我只在iOS模拟器上测试过，所以我不知道它在Android或Web上的工作方式是否会有所不同。*

原始主题index.ts、sizes.ts和space.ts。

react-native

来源：https://stackoverflow.com/questions/74361556/is-it-possible-to-override-the-theme-sizes-of-nativebase-to-obtain-rem-units

1条答案

按热度按时间

fkaflof61#

所以我在任何文档中都没有看到这一点，但是你想用来覆盖（或添加）大小的键实际上是space而不是sizes。我在GitHub上浏览NativeBase主题源代码时发现了这一点。

const myCustomTheme = extendTheme({
  space: {
    '0': 0, // NB use string keys... not sure if that matters.
    '1': 16,
    '2': 32,
    // and so on
  }
})

至于rem问题，您可以添加2rem作为自定义大小/空间，但它不会运行您的函数，因此，如果您想要类似1.5rem的东西，据我所知，它必须是“硬编码”的。
如果您有/需要很多选项，可以选择代码生成路线：

/** 
 * Generates 10 sizes at every 0.5rem
 * Change Array(x) to customize the number of sizes.
 * For larger/smaller steps, change the factor of idx (idx/2)
 **/
space: {
  '0': 0,
  '1rem': 16,
  '2rem': 32,
  // or...
  ...Array.from(Array(10).keys()).reduce((acc, _itm, idx) => {
    if (idx === 0) return acc;
    acc[`${idx/2}rem`] = idx / 2 * 8;
    return acc;
  }, {}),
},

赞(0）回复(0）举报 2022-12-19

我来回答

React Native 是否可以覆盖NativeBase的主题大小以获得rem单位？

1条答案

相关问题

热门标签

最新问答