如何在react-native中配置App.js来使用React-native-ui-kitten？

Question

我是react-native的新手，我正在尝试使用react-native-ui-kitten库。问题是文档并没有真正的帮助。

我已经安装了ui-kitten和主题，如以下命令所示：npm i react-native-ui-kitten @eva-design/eva

文档要求配置应用程序根目录，除非我错了，否则我将其视为App.js文件。

因此，我将App.js生成的代码更改为：

import React from 'react';
import {
  mapping,
  theme,
} from '@eva-design/eva';
import { ApplicationProvider } from 'react-native-ui-kitten';
import { Application } from './path-to/root.component';

export default class App extends React.Component {

   public render(): React.ReactNode {
     return (
       <ApplicationProvider
         mapping={mapping}
         theme={theme}>
         <Application/>
       </ApplicationProvider>
     );
   }
}

不幸的是，它不起作用。

最近有人用过ui-kitten库吗？

文档中的应用程序根是什么意思，以及如何设置一个简单的原生react项目来使用react-native-ui-kitten

是的，我确实检查了文档，但可能有些地方我做得不对。

Answer 1

我遇到了同样的问题。我发现这个UI工具包的创建者实际上在他们的代码示例Typescript中使用了Typescript。因此，您需要使用Typescript模板重新创建Reactnative项目，然后相应地将App.js重命名为App.tsx。任何其他组件都需要使用扩展名.tsx进行重命名。请确保您阅读了Typescript：

• https://www.typescriptlang.org

下面是使用Typescript重新创建项目的方法：

• https://facebook.github.io/react-native/blog/2018/05/07/using-typescript-with-react-native

万事如意，

Answer 2

我也是react-native的初学者，似乎我们在实现代码方面有些不同。我不确定这是否会有帮助，但这是我实现代码的方式：

import * as React from 'react';
import { mapping, light as lightTheme } from '@eva-design/eva';
import { ApplicationProvider } from 'react-native-ui-kitten';
import { Application } from './path-to/root.component';

const App = () => (
    <ApplicationProvider
        mapping={mapping}
        theme={lightTheme}>
        <Application/>
    </ApplicationProvider>
);

export default App;

你可以试一下，让我知道这是否适合你。祝好运!