React native 如何在react native中旋转Fontisto图标

我从“@expo/vector icons”导入Fontisto

Import{Fontisto}”

添加图标

以及旋转它的样式

const styles = StyleSheet.create({
    windDirectionArrow: {
        fontSize: 40,
        transform: [{ rotate: "90deg" }],
    },
});

但这种转变不起作用，有人知道其他解决方案吗

我正在渲染的视图如下所示

return (
        <View style={styles.container}>
            {error ? (
                <View style={styles.centeredContainer}>
                    <Text style={styles.text}>Unable to load weather data</Text>
                    <Text style={styles.text}>{error}</Text>
                </View>
            ) : isLoading ? (
                <View style={styles.centeredContainer}>
                    <Text style={styles.text}>Loading Weather Data</Text>
                    <ActivityIndicator
                        style={styles.activityIndicator}
                        size='large'
                        color='rgb(255,179,25)'
                    />
                </View>
            ) : (
                <View style={[styles.centeredContainer]}>
                    <Fontisto style={styles.text} name={icon} />
                    <Text style={styles.text}>{temperature}˚C</Text>
                    <Text style={styles.text}>
                        <Fontisto name='arrow-up' style={styles.windDirectionArrow} />
                        {windSpeed}mph
                    </Text>
                    <Text style={styles.text}>{weatherCondition}</Text>
                </View>
            )}
        </View>
    );

返回(
{错误(
无法加载天气数据
{错误}
)：正在加载(
加载天气数据
) : (
{温度}摄氏度
{风速}英里/小时
{weatherCondition}
)}
);

如果我将图标元素包装在自己的包装中，它就可以工作，但我认为这不是一个干净的解决方案

<Text style={styles.text}>
    <View>
        <Fontisto name='arrow-up' style={styles.windDirectionArrow} />
    </View>
    {windSpeed}mph
</Text>


{风速}英里/小时
它非常适合我

// With Rotation
<Fontisto name="arrow-up" style={styles.windDirectionArrow} />

// Without Rotation
<Fontisto name="arrow-up" style={styles.withoutRottion} />

// When icon is wrapped inside a View and that View is rotated
<View style={styles.windDirectionArrow}>
   <Fontisto name="arrow-up" style={{ fontSize: 40 }} />
</View>


还有，为什么不使用
Fontisto

和文本并排显示

<View style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
  <View style={styles.windDirectionArrow}>
    <Fontisto name="arrow-up" style={{ fontSize: 40 }} />
  </View>
  <Text style={styles.text}>{windSpeed}mph</Text>
</View>


{风速}英里/小时
感谢您抽出时间回复，首先我使用向上箭头，以便根据风向旋转箭头。第二，我现在意识到，只有当Fontisto图标元素在它自己的标记内时，旋转才起作用，我已经用代码片段更新了原始问题，向您展示了我的意思，并为我正在呈现的代码提供了上下文。因此，您可以做的是将图标包装在
视图
标记内，然后旋转该视图…我的意思是将旋转样式应用于该视图。因此，我希望箭头旁边有一些文本（未旋转）但是如果我有一个旋转视图标签图标，它将改为在一个新的行上，有没有解决这个问题的办法？检查更新的答案
<View style={{ justifyContent: 'center', alignItems: 'center', flexDirection: 'row' }}>
  <View style={styles.windDirectionArrow}>
    <Fontisto name="arrow-up" style={{ fontSize: 40 }} />
  </View>
  <Text style={styles.text}>{windSpeed}mph</Text>
</View>