有没有办法在元素中旋转图像 <BackgroundImage> [反应原生]

Question

我正在尝试将<BackgroundImage>元素中的图像旋转45度
我无法更改源图像
我无法使用常规<Image>属性。

我查阅了文档，做了一些搜索，但什么都找不到。

Answer 1

在元素上使用css类。

import React from "react";
import { ImageBackground, StyleSheet, Text, View } from "react-native";
const image = { uri: "https://reactjs.org/logo-og.png" };
const App = () => (
<View style={styles.container}>
<ImageBackground source={image} resizeMode="cover" style={styles.image}>
<Text style={styles.text}>Inside</Text>
</ImageBackground>
</View>
);
const styles = StyleSheet.create({
container: {
flex: 1,
},
image: {
flex: 1,
justifyContent: "center",
transform: [{ rotate: '45deg' }]
},
text: {
color: "white",
fontSize: 42,
lineHeight: 84,
fontWeight: "bold",
textAlign: "center",
backgroundColor: "#000000c0"
}
});
export default App;

Answer 2

使用这个，我认为它将有助于

<ImageBackground source={require("../Assets/icon.png")} style={{height:100,width:100,transform: [{ rotate: "180deg" }],}}>
<View style={{transform: [{ rotate: "180deg" }]}}>
<Text>fgf</Text>
</View>
</ImageBackground>

我希望它能解决你的疑问。