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

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


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


* مثال لمكوِّن الدالّة (Function Component)
* مثال لمكوِّن الدّالّة (Function Component)
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
import React from "react";
import React from "react";
سطر 237: سطر 237:
</syntaxhighlight>
</syntaxhighlight>


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


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


* مثال لمكوِّن الدالّة (Function Component)
* مثال لمكوِّن الدّالّة (Function Component)
<syntaxhighlight lang="javascript">
<syntaxhighlight lang="javascript">
import React from "react";
import React from "react";
سطر 421: سطر 421:
</syntaxhighlight>
</syntaxhighlight>


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


== الخاصيّات ==
== الخاصّيات ==


=== <code>borderTopRightRadius</code> ===
=== <code>borderTopRightRadius</code> ===
سطر 475: سطر 475:
!مطلوب
!مطلوب
|-
|-
|قيمة اسمية ‏‪(enum('visible','hidden'))
|<code>‏‪enum('visible','hidden')</code>
|لا
|لا
|}
|}
سطر 556: سطر 556:
!مطلوب
!مطلوب
|-
|-
|قيمة اسمية ‪(enum('visible','hidden'))
|<code>‪enum('visible','hidden')</code>
|لا
|لا
|}
|}
سطر 565: سطر 565:
!مطلوب
!مطلوب
|-
|-
|قيمة اسمية ‪(enum('cover','contain', 'stretch', 'repeat', 'center'))
|<code>‪enum('cover','contain', 'stretch', 'repeat', 'center')</code>
|لا
|لا
|}
|}

مراجعة 10:59، 21 يناير 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=30122»