时间戳

首页 > 解决方案 > 如何在本机反应中旋转 Fontisto 图标

react-native - 如何在本机反应中旋转 Fontisto 图标

问题描述

我导入 Fontistoimport { Fontisto } from "@expo/vector-icons";

添加图标<Fontisto style={styles.windDirectionArrow} name='arrow-up' />

以及旋转它的样式

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>
    );

如果我将 Icon 元素包裹在其自身中，它会起作用，但我认为这不是一个干净的解决方案

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

标签： react-nativeexpo

解决方案

它非常适合我

// 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>

我的风格：

 windDirectionArrow: {
    fontSize: 40,
    transform: [{ rotate: '90deg' }],
  },
  withoutRottion: {
    fontSize: 40,
  },

工作示例

还有你为什么不使用arrow-rightfromFontisto

对于文本并排

<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>

推荐阅读