Question

react-native-fontawesome在版本5上运行良好。我升级到6.0.1，但是下载了新的font-awesome文件，将新的tff文件添加到asset / fonts文件夹中，运行react-native链接react-native-fontawesome。

我关闭了模拟器并运行了react-native run-ios，发现以前可以使用的图标现在是问号。它们也不会出现在Android上

Answer 1

首先，您需要通过以下方式安装依赖项并链接库...

运行以下命令以安装依赖项。

npm install react-native-vector-icons --save

依赖关系的链接...

React Native 0.60更新后，他们引入了自动链接功能，这意味着我们不需要链接库，但是他们还提到一些库需要链接，而react-native-vector-icons就是其中之一。案件。因此，我们需要使用链接库。

反应本地链接react-native-vector-icons

并复制下面显示的给定的 App.js 文件。

/*Example of React Native Vector Icon*/
import React, {Component} from 'react';
//import React
import {Platform, StyleSheet, Text, View} from 'react-native';
//import all the basic components
import Icon from 'react-native-vector-icons/FontAwesome';
//import vector icons
type Props = {};
export default class App extends Component<Props> {
  render() {
    Icon.getImageSource('user', 20, 'red').then((source) => this.setState({ userIcon: source }));
    return (
      <View style={styles.container}>
        <Text>Example of Vector Icon</Text>
        <View style={{marginTop:16, marginBottom:16, justifyContent:'center', alignItems:'center', textAlign:'center'}}>
          <Text><Icon name="rocket" size={'{30}'} color="#900" /></Text>
          {/*Icon Component*/}
          <Icon name="rocket" size={30} color="#900" />
        </View>
        <View style={{marginTop:16, marginBottom:16}}>
          {/*Icon.Button Component*/}
          <Icon.Button name="facebook" backgroundColor="#3b5998" onPress={()=>alert("Login with Facebook")}>
            Login with Facebook
          </Icon.Button>
        </View>
      </View>
    );
  }
}
const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  }
});

或者您可以点击以下链接...

https://aboutreact.com/react-native-vector-icons/

将react-native-fontawesome升级到6.0.1，图标显示为问号

1 个答案: