我可以将native native elements UI与native base一起使用吗？

Question

我有一个项目大多是编写Native Base组件。但在某些情况下，我想使用React Native Elements。我只想知道是否有可能单独使用它们。

对于某些组件，我将使用像Avatar组件这样的React Native Elements。不同时导入它们，我的意思是只有一个UI工具包。

Answer 1

是的，您可以同时使用Native Base和React Native Elements中的组件，只要它们在同一组件中不被称为相同。让我解释：

以下App是两个库中两个组件的简单示例：

import { Button, ThemeProvider } from 'react-native-elements';
import {  Header } from 'native-base';

const MyApp = () => {
  return (
    <ThemeProvider>
      <Header>                  //Is rendered from the Native Base library
      <Button title="Hey!" />   //Is rendered from the React Native Elements library
    </ThemeProvider>
  );
};

如果您尝试执行以下操作，可能会遇到问题，因为它会抛出“重复声明错误”：

import { Button, ThemeProvider } from 'react-native-elements';    //Button is imported
import { Button, Header } from 'native-base';                     //Button is imported a second time

const MyApp = () => {
  return (
    <ThemeProvider>
      <Button>                   
        <Text>Click Me!</Text>
      </Button>                 
      <Button title="Hey!" />   
    </ThemeProvider>
  );
};

在此代码中，您从两个不同的库中定义了两次相同的组件（Button）。 React Native不会渲染该组件。如果从两个import语句中的一个中取出它，它将使用您从中导入它的库中的相应组件进行渲染。

希望有所帮助。