FontAwesome react-native 警告

Question

我正在嘗試在react-native-web-app中使用fontawesome

按照文檔中的建議做了所有事情，但由於某種原因在控制台中收到此警告。

<FontAwesomeIcon icon={faSearch} style={[styles.icon]} /> - 這是觸發所有警告的部分。 如果我將其刪除，警告也將消失。

警告：

警告：React 無法識別 DOM 元素上的secondaryFill道具。 如果您有意希望它作為自定義屬性出現在 DOM 中，請將其拼寫為小寫的secondaryfill 。 如果您不小心從父組件傳遞了它，請將其從 DOM 元素中移除。

警告：React 無法識別 DOM 元素上的secondaryOpacity道具。 如果您有意希望它作為自定義屬性出現在 DOM 中，請將其拼寫為小寫的secondaryopacity 。 如果您不小心從父組件傳遞了它，請將其從 DOM 元素中移除。

警告：findDOMNode 在 StrictMode 中已棄用。 findDOMNode 被傳遞給 StrictMode 中的 Path 實例。 相反，將 ref 直接添加到您要引用的元素。 在此處了解有關安全使用 refs 的更多信息： https://reactjs.org/link/strict-mode-find-node

警告：findDOMNode 在 StrictMode 中已棄用。 findDOMNode 被傳遞給 StrictMode 中的 Svg 實例。 相反，將 ref 直接添加到您要引用的元素。 在此處了解有關安全使用 refs 的更多信息： https://reactjs.org/link/strict-mode-find-node

Answer 1

看起來這是庫中打開拉取請求的已知問題：https://github.com/FortAwesome/react-native-fontawesome/pull/74

目前，該線程中的最后一條評論提供了一種解決方法。 web 可以使用@fortawesome/react-fontawesome ，Android/iOS 可以使用react-native-fontawesome 。

在這里復制他們的代碼片段：

import {FontAwesomeIcon as FontAwesomeReact} from '@fortawesome/react-fontawesome';
import {FontAwesomeIcon as FontAwesomeNative} from '@fortawesome/react-native-fontawesome';
import {number} from 'prop-types';
import React from 'react';
import {Platform, StyleSheet} from 'react-native';

FaIcon.propTypes = {
  size: number,
};
export default function FaIcon({size, style, ...props}) {
  if (Platform.OS === 'web') {
    const webStyles = StyleSheet.flatten([style, {width: size, height: size}]);
    return <FontAwesomeReact {...props} style={webStyles} />;
  }

  return <FontAwesomeNative {...props} size={size} style={style} />;
}