我有一个项目主要编写 Native Base 组件。但在某些情况下,我想使用 React Native Elements。我只想知道是否可以单独使用它们。
对于某些组件,我将只使用像 Avatar 组件这样的 React Native Elements。不是将它们一起导入,我的意思是只有一个 UI 工具包。
我有一个项目主要编写 Native Base 组件。但在某些情况下,我想使用 React Native Elements。我只想知道是否可以单独使用它们。
对于某些组件,我将只使用像 Avatar 组件这样的 React Native Elements。不是将它们一起导入,我的意思是只有一个 UI 工具包。
是的,您可以同时使用 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>
);
};
在此代码中,您从两个不同的库中定义了两次相同的组件(按钮)。React Native 不会渲染该组件。如果您将它从两个导入语句之一中取出,它将使用您从中导入它的库中的相应组件呈现。
希望有帮助。