Question

使用以下小吃： https://snack.expo.io/ry_5rCk84

我正在尝试在我的React本机应用程序中使用“材质图标”显示“ wifi_off”图标（只是在博览会上作为零食共享以便于共享），但这不是道具“名称”的公认值。并最终显示“？”未知图标。我可以通过“ 物质社区”图标集使用 wifi-off 图标

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';
import { Constants } from 'expo';
import {Icon} from 'react-native-elements';

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

export default class App extends React.Component {
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.paragraph}>
          Change code in the editor and watch it change on your phone! Save to get a shareable url.
        </Text>
        <Card>
          <AssetExample />
        </Card>
        <Icon name='wifi' size={50} type='material'/>
        <Icon name='wifi-off' size={50} type='material-community' />
        <Icon name='wifi_off' size={50} type='material' />
      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
  },
  paragraph: {
    margin: 24,
    fontSize: 18,
    fontWeight: 'bold',
    textAlign: 'center',
  },
});

Answer 1

react-native-elements使用react-native-vector-icons显示图标。

react-native-vector-icons有一个目录，您可以在其中检查可用的图标，也可以按名称查找它们。 https://oblador.github.io/react-native-vector-icons/

如果搜索名称中带有 wifi 的所有图标，则会发现 MaterialIcons 和 MaterialCommunityIcons

的以下结果

如果搜索 wiff_off ，您将发现没有结果。

因此， wifi_off 无法使用。

还值得注意的是react-native-elements当前不支持最新版本的react-native-vector-icons，您可以在当前打开的issue中看到它。

Answer 2

当您使用React Native元素Icon时，它在幕后的列表https://github.com/oblador/react-native-vector-icons/blob/master/glyphmaps/MaterialIcons.json中进行搜索，您可以在此处找到受支持的Icon的名称，并且可以看到“ wifi_off”不在此处，也许您可以尝试“ signal-wifi-off”。

对材料图标使用react-native-elements-无法识别某些图标

2 个答案: