如何在没有按钮组件的情况下获取图标组件，就像在反应原生元素中一样

Question

我正在使用react-native-paper，我想获取一个图标组件，但与按钮组件没有任何链接。我浏览了文档，但没有找到图标组件。我想要类似于反应原生元素的东西

import { Icon } from 'react-native-elements'

<Icon
name='g-translate'
color='#00aced' />

所以请帮助我实现这一目标。

Answer 1

您可以使用"react-native-vector-icons"库，因为react-native-paper中的图标来自react-native-vector-icons。 这是代码：

import Icon from 'react-native-vector-icons/FontAwesome'; const myIcon = <Icon name="rocket" size={30} color="#900" />;

Answer 2

另一种方法是直接从 react-native-paper 的源目录中导入 Icon 组件：

import { View } from 'react-native'
import { Text } from 'react-native-paper'
import Icon from 'react-native-paper/src/components/Icon'
function Price() {
return (
<View>
<Text>&euro; 2,100.58</Text>
<Icon source="arrow-right" size={15} />
</View>
)
}

Answer 3

您可以使用Avtar.Icon。默认情况下，它在图标周围有一些边距。您可以通过修改 Avtar.Icon 来创建自己的组件。下面是一个示例：

const iconSize = 34
const customAvtardimension = 0.6 * iconSize
<Avatar.Icon
size={iconSize}
icon="bell-ring-outline"
color={Colors.redA700}
style={{
backgroundColor: Colors.transparent,
width: customAvtardimension,
height: customAvtardimension,
}}
/>