反应原生向量图标以适合父容器，而不指定大小道具(Expo)

Question

我使用的是世博会https://github.com/expo/vector-icons提供的矢量图标

所有的图标都接受一个整数大小属性，我的用例是看看是否可以根据父容器自动调整图标大小，而不必担心每个设备上的大小(因为大小似乎在每个设备上都是一样的，尽管像素比例，尺寸等等)

<View style={{flex: 1}}>
  <Icon name="app-logo" size={30} color="white" />
</View>    

我试着将样式道具设置为下面的选项，但没有成功。我希望这不会起作用，因为毕竟它们只是字体，它们不需要支持width和height

<Icon name="app-logo" style={{flex: 1}} color="white" />

<Icon name="app-logo" style={{width: '100%', height: '100%' color="white" />

有没有更干净的或建议的方法来做这件事？使用设备的尺寸和比例是我最后的手段。

Answer 1

这是我能得到的最接近的例子：

​

​

import React from "react"
import { PixelRatio, StyleSheet, Text, View } from "react-native"
import { FontAwesome5 } from "@expo/vector-icons"

const getRandomNumber = (min: number, max: number) =>
  Math.random() * (max - min) + min

const App = () => {
  const [containerSize, setContainerSize] = React.useState<number>()

  const randomDimension = React.useMemo(() => getRandomNumber(100, 400), [])

  return (
    <View
      style={{
        flex: 1,
        backgroundColor: "green",
        justifyContent: "center",
        alignItems: "center",
      }}
    >
      <View
        style={{
          width: randomDimension,
          aspectRatio: 1,
          backgroundColor: "red",
        }}
        onLayout={layoutEvent =>
          setContainerSize(layoutEvent.nativeEvent.layout.width)
        }
      >
        <FontAwesome5
          name="app-store-ios"
          size={containerSize || 0}
          style={{
            textAlign: "center",
          }}
          color="blue"
        />
      </View>
    </View>
  )
}

export default App

这里有一些代码，用于故意将图标的父容器设置为随机大小的正方形，并将其设置在父容器上，这不是您要找的，但它帮助我重新创建了问题。

有趣的是，我认为您需要的是传递给图标父容器的onLayout属性的值，它获取父容器的大小并将其置于状态。该状态将是空的，直到第一次渲染和布局，所以我们有向量图标的大小默认为0，直到它发生。一旦我们有了状态中父图标的大小，我们就可以设置矢量图标的大小了。

矢量图标实际上不会填满整个父对象的空间，但它的伸缩性相当好。我认为这是因为矢量图标本身就是引擎盖下的字体(?)我们正在尝试设置字体的大小(真的(我想是吗？)到我们从父节点得到的大小，单位为像素。可能有一种很好的方法来清理using react native's PixelRatio -我花了一些时间尝试，但不能让它完美地工作。

我需要做的最后一件事(因为矢量图标实际上不会“填充”父视图)是将图标的style属性设置为{ textAlign: 'center' }，这会使它在父视图中水平居中(它已经垂直居中)，而不是关闭在父视图的左侧。

你可以通过在图标上添加一个常量和一个负上边距来将整个东西提交，但这是一种皮塔，显然不是一个很好的解决方案(每次这样做都会令人头疼，而且它可能在跨平台/不同像素密度下不起作用)。

我之所以看到这篇文章，是因为我试图让图标与文本保持相同的大小；我正在开发一款应用程序，它在一个小小的聊天气泡图标的左边显示了一个评论计数(整数)，我希望如果用户在系统设置中进行了调整，图标的大小可以根据系统的字体大小进行调整。这实际上更容易(这是有道理的，因为我关于矢量图标在引擎盖下表示为字体的理论是正确的)。下面是我的代码中实现这一点的相关部分：

const StoryCommentsLabel = ({ story }: { story: HackerNewsItem }) => {
  const navigation = useNavigation()
  const numberOfComments = story.descendants || 0
  const doNotActTouchable = { activeOpacity: 1 }
  const fontScale = React.useMemo(() => PixelRatio.getFontScale(), [])
  const defaultFontSize = 14
  const iconSize = defaultFontSize * fontScale
  return (
    <TouchableOpacity
      style={{ flexDirection: "row", justifyContent: "flex-end" }}
      onPress={() => {
        if (numberOfComments > 0) {
          navigation.navigate("Story Comments", { story })
        }
      }}
      hitSlop={{ top: 20, left: 20, bottom: 20, right: 20 }}
      {...(numberOfComments === 0 ? doNotActTouchable : {})}
    >
      <Text
        style={{
          fontSize: 14,
          color: PlatformColor("secondaryLabel"),
        }}
      >
        {numberOfComments}
      </Text>
      <View style={{ width: 5 }} />
      <Ionicons
        name="chatbubble"
        size={iconSize}
        color={PlatformColor("secondaryLabel")}
      />
    </TouchableOpacity>
  )
}

这里面有比你需要的更多的东西，但重要的是：

  const fontScale = React.useMemo(() => PixelRatio.getFontScale(), [])
  const defaultFontSize = 14
  const iconSize = defaultFontSize * fontScale