我可以将 React Native 元素 UI 与 Native Base 一起使用吗?
Can I use react native elements UI with native base?
我有一个主要编写 Native Base 组件的项目。但在某些情况下我想使用 React Native Elements。我只想知道是否可以单独使用它们。
对于某些组件,我将只使用像 Avatar 组件这样的 React Native Elements。不是同时导入它们,我的意思是只导入一个 UI 工具包。
是的,您可以同时使用 Native Base 和 React Native Elements 中的组件,只要它们在同一组件中的调用不同即可。让我解释一下:
以下应用程序是一个简单的示例,它包含来自两个库的两个组件:
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>
);
};
如果您尝试执行以下操作,您可能会遇到问题,因为它会抛出 "duplicate declaration error":
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 不会渲染该组件。如果您将它从两个导入语句之一中取出,它会与您从中导入它的库中的相应组件一起呈现。
希望对您有所帮助。
我有一个主要编写 Native Base 组件的项目。但在某些情况下我想使用 React Native Elements。我只想知道是否可以单独使用它们。
对于某些组件,我将只使用像 Avatar 组件这样的 React Native Elements。不是同时导入它们,我的意思是只导入一个 UI 工具包。
是的,您可以同时使用 Native Base 和 React Native Elements 中的组件,只要它们在同一组件中的调用不同即可。让我解释一下:
以下应用程序是一个简单的示例,它包含来自两个库的两个组件:
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>
);
};
如果您尝试执行以下操作,您可能会遇到问题,因为它会抛出 "duplicate declaration error":
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 不会渲染该组件。如果您将它从两个导入语句之一中取出,它会与您从中导入它的库中的相应组件一起呈现。
希望对您有所帮助。