خاصيات تنسيق الصور في React Native

من موسوعة حسوب
< ReactNative
مراجعة 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»