الفرق بين المراجعتين ل"ReactNative/image style props"
اذهب إلى التنقل
اذهب إلى البحث
رقية-بورية (نقاش | مساهمات) ط (تغيير العنوان، وموقع جدول المحتويات من الصفحة، وإزالة "ال" التعريفية من كلمتي صنف، ودالة في قسم الأمثلة.) |
جميل-بيلوني (نقاش | مساهمات) ط |
||
(مراجعتان متوسطتان بواسطة نفس المستخدم غير معروضتين) | |||
سطر 1: | سطر 1: | ||
<noinclude>{{DISPLAYTITLE:خاصيات تنسيق الصور في React Native}}</noinclude> | <noinclude>{{DISPLAYTITLE:خاصيات تنسيق الصور في React Native}}</noinclude> | ||
− | + | خاصيات لضبط تنسيق الصور. | |
+ | |||
== أمثلة == | == أمثلة == | ||
− | * مثال لمكوِّن دالّة (Function Component) | + | |
+ | === وضع إعادة تحجيم الصورة === | ||
+ | * [https://snack.expo.dev/@hsoubwiki/image-resize-modes-function-component-example مثال لمكوِّن دالّة (Function Component)] | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
import React from "react"; | import React from "react"; | ||
import { View, Image, Text, StyleSheet } from "react-native"; | import { View, Image, Text, StyleSheet } from "react-native"; | ||
− | + | ||
const DisplayAnImageWithStyle = () => { | const DisplayAnImageWithStyle = () => { | ||
− | + | return ( | |
− | + | <View style={styles.container}> | |
− | + | <View> | |
− | + | <Image | |
− | + | style={{ | |
− | + | resizeMode: "cover", | |
− | + | height: 100, | |
− | + | width: 200 | |
− | + | }} | |
− | + | source={require("@expo/snack-static/react-native-logo.png")} | |
− | + | /> | |
− | + | <Text>resizeMode : cover</Text> | |
− | + | </View> | |
− | + | <View> | |
− | + | <Image | |
− | + | style={{ | |
− | + | resizeMode: "contain", | |
− | + | height: 100, | |
− | + | width: 200 | |
− | + | }} | |
− | + | source={require("@expo/snack-static/react-native-logo.png")} | |
− | + | /> | |
− | + | <Text>resizeMode : contain</Text> | |
− | + | </View> | |
− | + | <View> | |
− | + | <Image | |
− | + | style={{ | |
− | + | resizeMode: "stretch", | |
− | + | height: 100, | |
− | + | width: 200 | |
− | + | }} | |
− | + | source={require("@expo/snack-static/react-native-logo.png")} | |
− | + | /> | |
− | + | <Text>resizeMode : stretch</Text> | |
− | + | </View> | |
− | + | <View> | |
− | + | <Image | |
− | + | style={{ | |
− | + | resizeMode: "repeat", | |
− | + | height: 100, | |
− | + | width: 200 | |
− | + | }} | |
− | + | source={require("@expo/snack-static/react-native-logo.png")} | |
− | + | /> | |
− | + | <Text>resizeMode : repeat</Text> | |
− | + | </View> | |
− | + | <View> | |
− | + | <Image | |
− | + | style={{ | |
− | + | resizeMode: "center", | |
− | + | height: 100, | |
− | + | width: 200 | |
− | + | }} | |
− | + | source={require("@expo/snack-static/react-native-logo.png")} | |
− | + | /> | |
− | + | <Text>resizeMode : center</Text> | |
− | + | </View> | |
− | + | </View> | |
); | ); | ||
} | } | ||
− | + | ||
const styles = StyleSheet.create({ | const styles = StyleSheet.create({ | ||
− | + | container: { | |
− | + | display: "flex", | |
− | + | flexDirection: "vertical", | |
− | + | justifyContent: "space-around", | |
− | + | alignItems: "center", | |
− | + | height: "100%", | |
− | + | textAlign: "center" | |
} | } | ||
}); | }); | ||
− | + | ||
export default DisplayAnImageWithStyle; | export default DisplayAnImageWithStyle; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | * مثال لمكوِّن صنف (Class Component) | + | * [https://snack.expo.dev/@hsoubwiki/image-resize-modes-class-component-example مثال لمكوِّن صنف (Class Component)] |
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
import React, { Component } from "react"; | import React, { Component } from "react"; | ||
import { View, Image, StyleSheet, Text } from "react-native"; | import { View, Image, StyleSheet, Text } from "react-native"; | ||
− | + | ||
class DisplayAnImageWithStyle extends Component { | class DisplayAnImageWithStyle extends Component { | ||
− | + | render() { | |
− | + | return ( | |
− | + | <View style={styles.container}> | |
− | + | <View> | |
− | + | <Image | |
− | + | style={{ | |
− | + | resizeMode: "cover", | |
− | + | height: 100, | |
− | + | width: 200 | |
− | + | }} | |
− | + | source={require("@expo/snack-static/react-native-logo.png")} | |
− | + | /> | |
− | + | <Text>resizeMode : cover</Text> | |
− | + | </View> | |
− | + | <View> | |
− | + | <Image | |
− | + | style={{ | |
− | + | resizeMode: "contain", | |
− | + | height: 100, | |
− | + | width: 200 | |
− | + | }} | |
− | + | source={require("@expo/snack-static/react-native-logo.png")} | |
− | + | /> | |
− | + | <Text>resizeMode : contain</Text> | |
− | + | </View> | |
− | + | <View> | |
− | + | <Image | |
− | + | style={{ | |
− | + | resizeMode: "stretch", | |
− | + | height: 100, | |
− | + | width: 200 | |
− | + | }} | |
− | + | source={require("@expo/snack-static/react-native-logo.png")} | |
− | + | /> | |
− | + | <Text>resizeMode : stretch</Text> | |
− | + | </View> | |
− | + | <View> | |
− | + | <Image | |
− | + | style={{ | |
− | + | resizeMode: "repeat", | |
− | + | height: 100, | |
− | + | width: 200 | |
− | + | }} | |
− | + | source={require("@expo/snack-static/react-native-logo.png")} | |
− | + | /> | |
− | + | <Text>resizeMode : repeat</Text> | |
− | + | </View> | |
− | + | <View> | |
− | + | <Image | |
− | + | style={{ | |
− | + | resizeMode: "center", | |
− | + | height: 100, | |
− | + | width: 200 | |
− | + | }} | |
− | + | source={require("@expo/snack-static/react-native-logo.png")} | |
− | + | /> | |
− | + | <Text>resizeMode : center</Text> | |
− | + | </View> | |
− | + | </View> | |
− | + | ); | |
} | } | ||
} | } | ||
− | + | ||
const styles = StyleSheet.create({ | const styles = StyleSheet.create({ | ||
− | + | container: { | |
− | + | display: "flex", | |
− | + | flexDirection: "vertical", | |
− | + | justifyContent: "space-around", | |
− | + | alignItems: "center", | |
− | + | height: "100%", | |
− | + | textAlign: "center" | |
} | } | ||
}); | }); | ||
− | + | ||
− | export default DisplayAnImageWithStyle; | + | export default DisplayAnImageWithStyle; |
</syntaxhighlight> | </syntaxhighlight> | ||
− | * مثال لمكوِّن الدّالّة (Function Component) | + | === حدود صورة === |
+ | * [https://snack.expo.dev/@hsoubwiki/style-borderwidth-and-bordercolor-function-component-example مثال لمكوِّن الدّالّة (Function Component)] | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
import React from "react"; | import React from "react"; | ||
import { View, Image, StyleSheet, Text } from "react-native"; | import { View, Image, StyleSheet, Text } from "react-native"; | ||
− | + | ||
const DisplayAnImageWithStyle = () => { | const DisplayAnImageWithStyle = () => { | ||
− | + | return ( | |
− | + | <View style={styles.container}> | |
− | + | <Image | |
− | + | style={{ | |
− | + | borderColor: "red", | |
− | + | borderWidth: 5, | |
− | + | height: 100, | |
− | + | width: 200 | |
− | + | }} | |
− | + | source={require("@expo/snack-static/react-native-logo.png")} | |
− | + | /> | |
− | + | <Text>borderColor & borderWidth</Text> | |
− | + | </View> | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
); | ); | ||
} | } | ||
− | + | ||
const styles = StyleSheet.create({ | const styles = StyleSheet.create({ | ||
− | + | container: { | |
− | + | display: "flex", | |
− | + | flexDirection: "vertical", | |
− | + | justifyContent: "center", | |
− | + | alignItems: "center", | |
− | + | height: "100%", | |
− | + | textAlign: "center" | |
} | } | ||
}); | }); | ||
− | + | ||
export default DisplayAnImageWithStyle; | export default DisplayAnImageWithStyle; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | * مثال لمكوِّن الصّنف (Class Component) | + | * [https://snack.expo.dev/@hsoubwiki/style-borderwidth-and-bordercolor-class-component-example مثال لمكوِّن الصّنف (Class Component)] |
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
import React, { Component } from "react"; | import React, { Component } from "react"; | ||
import { View, Image, StyleSheet, Text } from "react-native"; | import { View, Image, StyleSheet, Text } from "react-native"; | ||
− | + | ||
class DisplayAnImageWithStyle extends Component { | class DisplayAnImageWithStyle extends Component { | ||
− | + | render() { | |
− | + | return ( | |
− | + | <View style={styles.container}> | |
− | + | <Image | |
− | + | style={{ | |
− | + | borderColor: "red", | |
− | + | borderWidth: 5, | |
− | + | height: 100, | |
− | + | width: 200 | |
− | + | }} | |
− | + | source={require("@expo/snack-static/react-native-logo.png")} | |
− | + | /> | |
− | + | <Text>borderColor & borderWidth</Text> | |
− | + | </View> | |
− | + | ); | |
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
} | } | ||
} | } | ||
− | + | ||
const styles = StyleSheet.create({ | const styles = StyleSheet.create({ | ||
− | + | container: { | |
− | + | display: "flex", | |
− | + | flexDirection: "vertical", | |
− | + | justifyContent: "center", | |
− | + | alignItems: "center", | |
− | + | height: "100%", | |
− | + | textAlign: "center" | |
} | } | ||
}); | }); | ||
− | + | ||
− | export default DisplayAnImageWithStyle; | + | export default DisplayAnImageWithStyle; |
</syntaxhighlight> | </syntaxhighlight> | ||
− | * مثال لمكوِّن الدالّة (Function Component) | + | === زواية حواف الصورة (Border Radius) === |
+ | * [https://snack.expo.dev/@hsoubwiki/style-border-radius-function-component-example مثال لمكوِّن الدالّة (Function Component)] | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
import React from "react"; | import React from "react"; | ||
import { View, Image, StyleSheet, Text } from "react-native"; | import { View, Image, StyleSheet, Text } from "react-native"; | ||
− | + | ||
const DisplayAnImageWithStyle = () => { | const DisplayAnImageWithStyle = () => { | ||
− | + | return ( | |
− | + | <View style={styles.container}> | |
− | + | <View> | |
− | + | <Image | |
− | + | style={{ | |
− | + | borderTopRightRadius: 20, | |
− | + | height: 100, | |
− | + | width: 200 | |
− | + | }} | |
− | + | source={require("@expo/snack-static/react-native-logo.png")} | |
− | + | /> | |
− | + | <Text>borderTopRightRadius</Text> | |
− | + | </View> | |
− | + | <View> | |
− | + | <Image | |
+ | style={{ | ||
+ | borderBottomRightRadius: 20, | ||
+ | height: 100, | ||
+ | width: 200 | ||
+ | }} | ||
+ | source={require("@expo/snack-static/react-native-logo.png")} | ||
+ | /> | ||
+ | <Text>borderBottomRightRadius</Text> | ||
+ | </View> | ||
+ | <View> | ||
+ | <Image | ||
+ | style={{ | ||
+ | borderBottomLeftRadius: 20, | ||
+ | height: 100, | ||
+ | width: 200 | ||
+ | }} | ||
+ | source={require("@expo/snack-static/react-native-logo.png")} | ||
+ | /> | ||
+ | <Text>borderBottomLeftRadius</Text> | ||
+ | </View> | ||
+ | <View> | ||
+ | <Image | ||
+ | style={{ | ||
+ | borderTopLeftRadius: 20, | ||
+ | height: 100, | ||
+ | width: 200 | ||
+ | }} | ||
+ | source={require("@expo/snack-static/react-native-logo.png")} | ||
+ | /> | ||
+ | <Text>borderTopLeftRadius</Text> | ||
+ | </View> | ||
+ | </View> | ||
); | ); | ||
} | } | ||
− | + | ||
const styles = StyleSheet.create({ | const styles = StyleSheet.create({ | ||
− | + | container: { | |
− | + | display: "flex", | |
− | + | flexDirection: "vertical", | |
− | + | justifyContent: "space-around", | |
− | + | alignItems: "center", | |
− | + | height: "100%", | |
− | + | textAlign: "center" | |
} | } | ||
}); | }); | ||
− | + | ||
export default DisplayAnImageWithStyle; | export default DisplayAnImageWithStyle; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | * مثال لمكوِّن الصّنف (Class Component) | + | * [https://snack.expo.dev/@hsoubwiki/style-border-radius-class-component-example مثال لمكوِّن الصّنف (Class Component)] |
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
import React, { Component } from "react"; | import React, { Component } from "react"; | ||
import { View, Image, StyleSheet, Text } from "react-native"; | import { View, Image, StyleSheet, Text } from "react-native"; | ||
− | + | ||
class DisplayAnImageWithStyle extends Component { | class DisplayAnImageWithStyle extends Component { | ||
− | + | render() { | |
− | + | return ( | |
− | + | <View style={styles.container}> | |
− | + | <View> | |
− | + | <Image | |
− | + | style={{ | |
− | + | borderTopRightRadius: 20, | |
− | + | height: 100, | |
− | + | width: 200 | |
− | + | }} | |
− | + | source={require("@expo/snack-static/react-native-logo.png")} | |
− | + | /> | |
− | + | <Text>borderTopRightRadius</Text> | |
− | + | </View> | |
− | + | <View> | |
+ | <Image | ||
+ | style={{ | ||
+ | borderBottomRightRadius: 20, | ||
+ | height: 100, | ||
+ | width: 200 | ||
+ | }} | ||
+ | source={require("@expo/snack-static/react-native-logo.png")} | ||
+ | /> | ||
+ | <Text>borderBottomRightRadius</Text> | ||
+ | </View> | ||
+ | <View> | ||
+ | <Image | ||
+ | style={{ | ||
+ | borderBottomLeftRadius: 20, | ||
+ | height: 100, | ||
+ | width: 200 | ||
+ | }} | ||
+ | source={require("@expo/snack-static/react-native-logo.png")} | ||
+ | /> | ||
+ | <Text>borderBottomLeftRadius</Text> | ||
+ | </View> | ||
+ | <View> | ||
+ | <Image | ||
+ | style={{ | ||
+ | borderTopLeftRadius: 20, | ||
+ | height: 100, | ||
+ | width: 200 | ||
+ | }} | ||
+ | source={require("@expo/snack-static/react-native-logo.png")} | ||
+ | /> | ||
+ | <Text>borderTopLeftRadius</Text> | ||
+ | </View> | ||
+ | </View> | ||
+ | ); | ||
} | } | ||
} | } | ||
− | + | ||
const styles = StyleSheet.create({ | const styles = StyleSheet.create({ | ||
− | + | container: { | |
− | + | display: "flex", | |
− | + | flexDirection: "vertical", | |
− | + | justifyContent: "space-around", | |
− | + | alignItems: "center", | |
− | + | height: "100%", | |
− | + | textAlign: "center" | |
} | } | ||
}); | }); | ||
− | + | ||
− | export default DisplayAnImageWithStyle; | + | export default DisplayAnImageWithStyle; |
</syntaxhighlight> | </syntaxhighlight> | ||
− | * مثال لمكوِّن الدّالّة (Function Component) | + | === لون الصورة === |
+ | * [https://snack.expo.dev/@hsoubwiki/style-tintcolor-function-component مثال لمكوِّن الدّالّة (Function Component)] | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
import React from "react"; | import React from "react"; | ||
import { View, Image, StyleSheet, Text } from "react-native"; | import { View, Image, StyleSheet, Text } from "react-native"; | ||
− | + | ||
const DisplayAnImageWithStyle = () => { | const DisplayAnImageWithStyle = () => { | ||
− | + | return ( | |
− | + | <View style={styles.container}> | |
− | + | <Image | |
− | + | style={{ | |
− | + | tintColor: "#000000", | |
− | + | resizeMode: "contain", | |
− | + | height: 100, | |
− | + | width: 200 | |
− | + | }} | |
− | + | source={require("@expo/snack-static/react-native-logo.png")} | |
− | + | /> | |
− | + | <Text>tintColor</Text> | |
− | + | </View> | |
); | ); | ||
} | } | ||
− | + | ||
const styles = StyleSheet.create({ | const styles = StyleSheet.create({ | ||
− | + | container: { | |
− | + | display: "flex", | |
− | + | flexDirection: "vertical", | |
− | + | justifyContent: "center", | |
− | + | alignItems: "center", | |
− | + | height: "100%", | |
− | + | textAlign: "center" | |
} | } | ||
}); | }); | ||
− | + | ||
export default DisplayAnImageWithStyle; | export default DisplayAnImageWithStyle; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | * مثال لمكوِّن الصّنف (Class Component) | + | * [https://snack.expo.dev/@hsoubwiki/style-tintcolor-class-component مثال لمكوِّن الصّنف (Class Component)] |
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
import React, { Component } from "react"; | import React, { Component } from "react"; | ||
import { View, Image, StyleSheet, Text } from "react-native"; | import { View, Image, StyleSheet, Text } from "react-native"; | ||
− | + | ||
class DisplayAnImageWithStyle extends Component { | class DisplayAnImageWithStyle extends Component { | ||
− | + | render() { | |
− | + | return ( | |
− | + | <View style={styles.container}> | |
− | + | <Image | |
− | + | style={{ | |
− | + | tintColor: "#000000", | |
− | + | resizeMode: "contain", | |
− | + | height: 100, | |
− | + | width: 200 | |
− | + | }} | |
− | + | source={require("@expo/snack-static/react-native-logo.png")} | |
− | + | /> | |
− | + | <Text>tintColor</Text> | |
− | + | </View> | |
− | + | ); | |
} | } | ||
} | } | ||
− | + | ||
const styles = StyleSheet.create({ | const styles = StyleSheet.create({ | ||
− | + | container: { | |
− | + | display: "flex", | |
− | + | flexDirection: "vertical", | |
− | + | justifyContent: "center", | |
− | + | alignItems: "center", | |
− | + | height: "100%", | |
− | + | textAlign: "center" | |
} | } | ||
}); | }); | ||
− | + | ||
export default DisplayAnImageWithStyle; | export default DisplayAnImageWithStyle; | ||
</syntaxhighlight> | </syntaxhighlight> | ||
− | == | + | == الخاصيات == |
− | === <code> | + | === <code>backfaceVisibility</code> === |
+ | تحدد هذه الخاصية فيما إذا كان الوجه الخلف لصورة مدوّرة يجب أن يكون ظاهرًا. القيمة الافتراضية 'visible'. | ||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
− | | | + | |('visible','hidden') |
|لا | |لا | ||
|} | |} | ||
− | === <code> | + | === <code>backgroundColor</code> === |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
− | | | + | |لون ([[ReactNative/colors|color]]) |
|لا | |لا | ||
|} | |} | ||
− | === <code> | + | === <code>borderTopRightRadius</code> === |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 487: | سطر 492: | ||
|} | |} | ||
− | === <code> | + | ===<code>borderBottomLeftRadius</code>=== |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 496: | سطر 501: | ||
|} | |} | ||
− | === <code> | + | === <code>borderBottomRightRadius</code> === |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
− | | | + | |عدد (number) |
|لا | |لا | ||
|} | |} | ||
− | === <code> | + | === <code>borderColor</code> === |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
− | | | + | |لون ([[ReactNative/colors|color]]) |
|لا | |لا | ||
|} | |} | ||
− | === <code> | + | === <code>borderRadius</code> === |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 523: | سطر 528: | ||
|} | |} | ||
− | === <code> | + | === <code>borderTopLeftRadius</code> === |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
− | | | + | |عدد (number) |
|لا | |لا | ||
|} | |} | ||
− | === <code>borderWidth</code> === | + | ===<code>borderWidth</code>=== |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 542: | سطر 547: | ||
=== <code>opacity</code> === | === <code>opacity</code> === | ||
+ | تضبط قيمة عتامة الصورة، ويجب أن تكون قيمته بين 0.0 - 1.0، والقيمة الافتراضية 1.0. | ||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
سطر 559: | سطر 565: | ||
|} | |} | ||
− | === <code> | + | === <code>overlayColor</code> === |
+ | تُستخدم هذه الخاصيّة لتعبئة الفراغات الناتجة عن الصور ذات الزوايا الدائريّة بلونٍ صريحٍ غير متدرّجٍ (solid color)، وهي مفيدةٌ في حالات الزوايا أو الحواف الدائريّة التي لا تدعمها منصة Android: | ||
+ | |||
+ | * وضعيات تحجيم محددة، مثل: الاحتواء <code>contain</code>. | ||
+ | * الصور المتحركة GIFs. | ||
+ | |||
+ | إن الاستخدام النموذجي لهذه الخاصيّة هو مع الصورة المُظهرة على خلفيةٍ ذات لونٍ غير متدرّجٍ، وإعداد <code>overlayColor</code> بحيث تكون بلون الخلفيّة نفسه. | ||
+ | |||
+ | يمكن الإطلاع على [https://frescolib.org/docs/rounded-corners-and-circles.html Rounded Corners and Circles] لمزيدٍ من التفاصيل حول كيفيّة عمل هذه الخاصيّة. | ||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
+ | !المنصة | ||
|- | |- | ||
− | | | + | |سلسلة نصية (string) |
|لا | |لا | ||
+ | |Android | ||
|} | |} | ||
− | === <code> | + | === <code>resizeMode</code> === |
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
|- | |- | ||
− | | | + | |('cover','contain', 'stretch', 'repeat', 'center') |
|لا | |لا | ||
|} | |} | ||
+ | |||
+ | === <code>tintColor</code> === | ||
تُستخدم هذه الخاصيّة لتغيير لون جميع البكسلات غير الشفافة (non-transparent) للون الخفيف. | تُستخدم هذه الخاصيّة لتغيير لون جميع البكسلات غير الشفافة (non-transparent) للون الخفيف. | ||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
− | |||
{| class="wikitable" | {| class="wikitable" | ||
!النوع | !النوع | ||
!مطلوب | !مطلوب | ||
− | |||
|- | |- | ||
− | | | + | |لون ([[ReactNative/colors|color]]) |
|لا | |لا | ||
− | |||
|} | |} | ||
− | |||
== مصادر == | == مصادر == | ||
* [https://facebook.github.io/react-native/docs/image-style-props صفحة Image Style Props في توثيق React Native الرسميّ] | * [https://facebook.github.io/react-native/docs/image-style-props صفحة Image Style Props في توثيق React Native الرسميّ] | ||
[[تصنيف:ReactNative]] | [[تصنيف:ReactNative]] | ||
+ | [[تصنيف:React Native Component]] |
المراجعة الحالية بتاريخ 14:05، 9 أكتوبر 2021
خاصيات لضبط تنسيق الصور.
أمثلة
وضع إعادة تحجيم الصورة
import React from "react";
import { View, Image, Text, StyleSheet } from "react-native";
const DisplayAnImageWithStyle = () => {
return (
<View style={styles.container}>
<View>
<Image
style={{
resizeMode: "cover",
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>resizeMode : cover</Text>
</View>
<View>
<Image
style={{
resizeMode: "contain",
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>resizeMode : contain</Text>
</View>
<View>
<Image
style={{
resizeMode: "stretch",
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>resizeMode : stretch</Text>
</View>
<View>
<Image
style={{
resizeMode: "repeat",
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>resizeMode : repeat</Text>
</View>
<View>
<Image
style={{
resizeMode: "center",
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>resizeMode : center</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
display: "flex",
flexDirection: "vertical",
justifyContent: "space-around",
alignItems: "center",
height: "100%",
textAlign: "center"
}
});
export default DisplayAnImageWithStyle;
import React, { Component } from "react";
import { View, Image, StyleSheet, Text } from "react-native";
class DisplayAnImageWithStyle extends Component {
render() {
return (
<View style={styles.container}>
<View>
<Image
style={{
resizeMode: "cover",
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>resizeMode : cover</Text>
</View>
<View>
<Image
style={{
resizeMode: "contain",
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>resizeMode : contain</Text>
</View>
<View>
<Image
style={{
resizeMode: "stretch",
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>resizeMode : stretch</Text>
</View>
<View>
<Image
style={{
resizeMode: "repeat",
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>resizeMode : repeat</Text>
</View>
<View>
<Image
style={{
resizeMode: "center",
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>resizeMode : center</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
display: "flex",
flexDirection: "vertical",
justifyContent: "space-around",
alignItems: "center",
height: "100%",
textAlign: "center"
}
});
export default DisplayAnImageWithStyle;
حدود صورة
import React from "react";
import { View, Image, StyleSheet, Text } from "react-native";
const DisplayAnImageWithStyle = () => {
return (
<View style={styles.container}>
<Image
style={{
borderColor: "red",
borderWidth: 5,
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>borderColor & borderWidth</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
display: "flex",
flexDirection: "vertical",
justifyContent: "center",
alignItems: "center",
height: "100%",
textAlign: "center"
}
});
export default DisplayAnImageWithStyle;
import React, { Component } from "react";
import { View, Image, StyleSheet, Text } from "react-native";
class DisplayAnImageWithStyle extends Component {
render() {
return (
<View style={styles.container}>
<Image
style={{
borderColor: "red",
borderWidth: 5,
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>borderColor & borderWidth</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
display: "flex",
flexDirection: "vertical",
justifyContent: "center",
alignItems: "center",
height: "100%",
textAlign: "center"
}
});
export default DisplayAnImageWithStyle;
زواية حواف الصورة (Border Radius)
import React from "react";
import { View, Image, StyleSheet, Text } from "react-native";
const DisplayAnImageWithStyle = () => {
return (
<View style={styles.container}>
<View>
<Image
style={{
borderTopRightRadius: 20,
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>borderTopRightRadius</Text>
</View>
<View>
<Image
style={{
borderBottomRightRadius: 20,
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>borderBottomRightRadius</Text>
</View>
<View>
<Image
style={{
borderBottomLeftRadius: 20,
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>borderBottomLeftRadius</Text>
</View>
<View>
<Image
style={{
borderTopLeftRadius: 20,
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>borderTopLeftRadius</Text>
</View>
</View>
);
}
const styles = StyleSheet.create({
container: {
display: "flex",
flexDirection: "vertical",
justifyContent: "space-around",
alignItems: "center",
height: "100%",
textAlign: "center"
}
});
export default DisplayAnImageWithStyle;
import React, { Component } from "react";
import { View, Image, StyleSheet, Text } from "react-native";
class DisplayAnImageWithStyle extends Component {
render() {
return (
<View style={styles.container}>
<View>
<Image
style={{
borderTopRightRadius: 20,
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>borderTopRightRadius</Text>
</View>
<View>
<Image
style={{
borderBottomRightRadius: 20,
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>borderBottomRightRadius</Text>
</View>
<View>
<Image
style={{
borderBottomLeftRadius: 20,
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>borderBottomLeftRadius</Text>
</View>
<View>
<Image
style={{
borderTopLeftRadius: 20,
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>borderTopLeftRadius</Text>
</View>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
display: "flex",
flexDirection: "vertical",
justifyContent: "space-around",
alignItems: "center",
height: "100%",
textAlign: "center"
}
});
export default DisplayAnImageWithStyle;
لون الصورة
import React from "react";
import { View, Image, StyleSheet, Text } from "react-native";
const DisplayAnImageWithStyle = () => {
return (
<View style={styles.container}>
<Image
style={{
tintColor: "#000000",
resizeMode: "contain",
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>tintColor</Text>
</View>
);
}
const styles = StyleSheet.create({
container: {
display: "flex",
flexDirection: "vertical",
justifyContent: "center",
alignItems: "center",
height: "100%",
textAlign: "center"
}
});
export default DisplayAnImageWithStyle;
import React, { Component } from "react";
import { View, Image, StyleSheet, Text } from "react-native";
class DisplayAnImageWithStyle extends Component {
render() {
return (
<View style={styles.container}>
<Image
style={{
tintColor: "#000000",
resizeMode: "contain",
height: 100,
width: 200
}}
source={require("@expo/snack-static/react-native-logo.png")}
/>
<Text>tintColor</Text>
</View>
);
}
}
const styles = StyleSheet.create({
container: {
display: "flex",
flexDirection: "vertical",
justifyContent: "center",
alignItems: "center",
height: "100%",
textAlign: "center"
}
});
export default DisplayAnImageWithStyle;
الخاصيات
backfaceVisibility
تحدد هذه الخاصية فيما إذا كان الوجه الخلف لصورة مدوّرة يجب أن يكون ظاهرًا. القيمة الافتراضية 'visible'.
النوع | مطلوب |
---|---|
('visible','hidden') | لا |
backgroundColor
النوع | مطلوب |
---|---|
لون (color) | لا |
borderTopRightRadius
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderBottomLeftRadius
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderBottomRightRadius
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderColor
النوع | مطلوب |
---|---|
لون (color) | لا |
borderRadius
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderTopLeftRadius
النوع | مطلوب |
---|---|
عدد (number) | لا |
borderWidth
النوع | مطلوب |
---|---|
عدد (number) | لا |
opacity
تضبط قيمة عتامة الصورة، ويجب أن تكون قيمته بين 0.0 - 1.0، والقيمة الافتراضية 1.0.
النوع | مطلوب |
---|---|
عدد (number) | لا |
overflow
النوع | مطلوب |
---|---|
enum('visible','hidden')
|
لا |
overlayColor
تُستخدم هذه الخاصيّة لتعبئة الفراغات الناتجة عن الصور ذات الزوايا الدائريّة بلونٍ صريحٍ غير متدرّجٍ (solid color)، وهي مفيدةٌ في حالات الزوايا أو الحواف الدائريّة التي لا تدعمها منصة Android:
- وضعيات تحجيم محددة، مثل: الاحتواء
contain
. - الصور المتحركة GIFs.
إن الاستخدام النموذجي لهذه الخاصيّة هو مع الصورة المُظهرة على خلفيةٍ ذات لونٍ غير متدرّجٍ، وإعداد overlayColor
بحيث تكون بلون الخلفيّة نفسه.
يمكن الإطلاع على Rounded Corners and Circles لمزيدٍ من التفاصيل حول كيفيّة عمل هذه الخاصيّة.
النوع | مطلوب | المنصة |
---|---|---|
سلسلة نصية (string) | لا | Android |
resizeMode
النوع | مطلوب |
---|---|
('cover','contain', 'stretch', 'repeat', 'center') | لا |
tintColor
تُستخدم هذه الخاصيّة لتغيير لون جميع البكسلات غير الشفافة (non-transparent) للون الخفيف.
النوع | مطلوب |
---|---|
لون (color) | لا |