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

Question

使用下面的零食： https://snack.expo.io/ry_5rCk84

我正在尝试在我的 React Native 应用程序中使用 Material 图标显示图标 'wifi_off'道具 'name'。并最终显示一个“？”对于未知图标。我可以使用 wifi-off 图标使用 'material-community' 图标集

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

如果您搜索wifi_off，您会发现没有任何结果。

因此wifi_off无法使用。

另外值得注意的是react-native-elements目前不支持最新版本的react-native-vector-icons，大家可以在目前打开的这个issue.

中看到

Answer 2

当你使用 react native elements 图标时，它在后台搜索列表 https://github.com/oblador/react-native-vector-icons/blob/master/glyphmaps/MaterialIcons.json，在这里你可以找到支持的图标的名称，如你所见"wifi_off"这里没有，或许你可以试试"signal-wifi-off"。

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

using react-native-elements for material Icons - does not recognise some of the icons

react-native

react-native-vector-icons

react-native-elements