الفرق بين المراجعتين لصفحة: «ReactNative/image style props»

من موسوعة حسوب
→ التعديل السابقالتعديل اللاحق ←
مرئينص الويكي
مراجعة
ط تغيير العنوان، وموقع جدول المحتويات من الصفحة، وإزالة "ال" التعريفية من كلمتي صنف، ودالة في قسم الأمثلة.
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:Image Style Props في React Native}}</noinclude>  
<noinclude>{{DISPLAYTITLE:خاصيات تنسيق الصور في React Native}}</noinclude>  
 
__toc__
== أمثلة ==
== أمثلة ==
__toc__
* مثال لمكوِّن دالّة (Function Component)
* مثال لمكوِّن الدّالّة (Function Component)
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
import React from "react";
import React from "react";
سطر 84: سطر 83:
</syntaxhighlight>
</syntaxhighlight>


* مثال لمكوِّن الصّنف (Class Component)
* مثال لمكوِّن صنف (Class Component)
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
import React, { Component } from "react";
import React, { Component } from "react";

مراجعة 05:02، 28 يناير 2021

أمثلة

  • مثال لمكوِّن دالّة (Function Component)
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;
  • مثال لمكوِّن صنف (Class Component)
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;
  • مثال لمكوِّن الدّالّة (Function Component)
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;
  • مثال لمكوِّن الصّنف (Class Component)
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;
  • مثال لمكوِّن الدالّة (Function Component)
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>
        <Text>borderColor & borderWidth</Text>
      </Text>
    </View>
  );
}
​
const styles = StyleSheet.create({
  container: {
    display: "flex",
    flexDirection: "vertical",
    justifyContent: "center",
    alignItems: "center",
    height: "100%",
    textAlign: "center"
  }
});
​
export default DisplayAnImageWithStyle;
  • مثال لمكوِّن الصّنف (Class Component)
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;
  • مثال لمكوِّن الدّالّة (Function Component)
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: "space-around",
    alignItems: "center",
    height: "100%",
    textAlign: "center"
  }
});
​
export default DisplayAnImageWithStyle;
  • مثال لمكوِّن الصّنف (Class Component)
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: "space-around",
    alignItems: "center",
    height: "100%",
    textAlign: "center"
  }
});
​
export default DisplayAnImageWithStyle;

الخاصّيات

borderTopRightRadius

النوع مطلوب
عدد (number) لا

backfaceVisibility

النوع مطلوب
‏‪enum('visible','hidden') لا

borderBottomLeftRadius

النوع مطلوب
عدد (number) لا

borderBottomRightRadius

النوع مطلوب
عدد (number) لا

borderColor

النوع مطلوب
لون (color) لا

borderRadius

النوع مطلوب
عدد (number) لا

borderTopLeftRadius

النوع مطلوب
عدد (number) لا

backgroundColor

النوع مطلوب
لون (color) لا

borderWidth

النوع مطلوب
عدد (number) لا

opacity

النوع مطلوب
عدد (number) لا

overflow

النوع مطلوب
‪enum('visible','hidden') لا

resizeMode

النوع مطلوب
‪enum('cover','contain', 'stretch', 'repeat', 'center') لا

tintColor

النوع مطلوب
لون (color) لا

تُستخدم هذه الخاصيّة لتغيير لون جميع البكسلات غير الشفافة (non-transparent) للون الخفيف.

overlayColor

تُستخدم هذه الخاصيّة لتعبئة الفراغات الناتجة عن الصور ذات الزوايا الدائريّة بلونٍ صريحٍ غير متدرّجٍ (solid color)، وهي مفيدةٌ في حالات الزوايا الدائريّة التي لا تدعمها منصة Android:

  • وضعيات تحجيم محددة، مثل: الاحتواء contain.
  • الصور المتحركة GIFs.

إن الاستخدام النموذجي لهذه الخاصيّة هو مع الصورة المُظهرة على خلفيةٍ ذات لونٍ غير متدرّجٍ، وإعداد overlayColor بحيث تكون بلون الخلفيّة نفسه.

يمكن الإطلاع على Rounded Corners and Circles لمزيدٍ من التفاصيل حول كيفيّة عمل هذه الخاصيّة.

النوع مطلوب المنصة
سلسلة نصية (string) لا Android

مصادر

مجلوبة من «https://wiki.hsoub.com/index.php?title=ReactNative/image_style_props&oldid=30176»