UI Kitten & React Native Web 无自定义映射

Question

我在尝试在 React Native Web 中加载最基本的自定义映射时遇到问题。自定义样式在应用程序中加载得很好，但不是 Web。按照提议 here 使用最新版本的 babel loader hack。我正在使用 UI Kitten 文档中为 v5.x

建议的默认映射

我的代码如下所示：

import * as eva from '@eva-design/eva'
import * as mapping from '../styles/mapping.json'
import { myTheme } from '../styles/light-theme'

export default function App(): React.ReactElement {
    return <>
            <ApplicationProvider {...eva} theme={myTheme} customMapping={mapping}>
             ...
            </ApplicationProvider>
        </>
}

Answer 1

我尝试用一个空白的 repo 进行复制并且它工作正常，所以一次一行我发现我的导入不正确（babel 无法读取？）。

而不是：

import * as mapping from '../styles/mapping.json'

应该是：

import {default as mapping} from '../styles/mapping.json'

UIKitten 文档中建议了正确的方法，所以我认为这种情况不会发生在很多人身上，但可能会对其他人有所帮助，因为如果有人大部分时间都在使用 App 模拟器并且稍后才检查 Web。

Answer 2

这是我对ts文件使用自定义映射的方式：custom-mapping.ts

export const customMapping: any = {
    components: {
        CircleButton: {
            meta:{...},
            appearances: {...}
    }
    }
}

并像这样导入它：

...
import {customMapping} from '../custom-mapping';

<ApplicationProvider
     ...
     customMapping={{...eva.mapping, ...customMapping}}
   >
      {children}
</ApplicationProvider>

UI Kitten & React Native Web 无自定义映射

UI Kitten & React Native Web no custom mapping

react-native-web

expo

react-native-ui-kitten