الفرق بين المراجعتين ل"ReactNative/text style props"

من موسوعة حسوب
اذهب إلى التنقل اذهب إلى البحث
(أنشأ الصفحة ب'= Text Style Props = == مثال == <syntaxhighlight lang="javascript"> import React, { useState } from "react"; import { FlatList, Platform, ScrollView, Slider, StyleS...')
 
ط (مراجعة)
سطر 1: سطر 1:
= Text Style Props =
+
<noinclude>{{DISPLAYTITLE:Text Style Props في React Native}}</noinclude>
 
+
__toc__
 
== مثال ==
 
== مثال ==
 
<syntaxhighlight lang="javascript">
 
<syntaxhighlight lang="javascript">
سطر 355: سطر 355:
 
|كائن
 
|كائن
  
object{width:number,height:number}
+
‏‎‏‪object<code>{width:number,height:number}</code>
 
|لا
 
|لا
 
|}
 
|}
سطر 364: سطر 364:
 
!'''مطلوب'''
 
!'''مطلوب'''
 
|-
 
|-
|[https://reactnative.dev/docs/colors لون]
+
|([https://reactnative.dev/docs/colors لون])
 
|لا
 
|لا
 
|}
 
|}
سطر 375: سطر 375:
 
|رقم
 
|رقم
  
number
+
(number)
 
|لا
 
|لا
 
|}
 
|}
سطر 386: سطر 386:
 
|قيمة اسمية
 
|قيمة اسمية
  
enum('normal','italic')
+
<code>‎‏‪enum('normal','italic')</code>
 
|لا
 
|لا
 
|}
 
|}
  
 
=== <code>fontWeight</code> ===
 
=== <code>fontWeight</code> ===
تُستخدم لتحديد ثخن الخط، ومعظم الخطوط تدعم القيمتين طبيعي 'normal' وثخين 'bold'. ولا تدعم جميع الخطوط كلّ احتمالات القيم العدديّةٍ، لذا نختار أقرب قيمةٍ في هذه الحالة .
+
تُستخدم هذه الخاصية لتحديد ثخن الخط، ومعظم الخطوط تدعم القيمتين طبيعي 'normal'، وثخين 'bold'، بينما لا تدعم جميع الخطوط كلّ احتمالات القيم العدديّةٍ، لذا نختار أقرب قيمةٍ في هذه الحالة.
 
{| class="wikitable"
 
{| class="wikitable"
 
!'''النوع'''
 
!'''النوع'''
سطر 398: سطر 398:
 
|قيمة اسمية
 
|قيمة اسمية
  
enum('normal','bold','100','200','300','400','500','600','700','800','900')
+
<code>‪enum('normal','bold','100','200','300','400','500','600','700','800','900')</code>
 
|لا
 
|لا
 
|}
 
|}
سطر 409: سطر 409:
 
|رقم
 
|رقم
  
number
+
(number)
 
|لا
 
|لا
 
|}
 
|}
  
 
=== <code>textAlgin</code> ===
 
=== <code>textAlgin</code> ===
وتُستخدم لتحديد محاذاة الخط، تدعم منصّة iOS القيمة 'justify' فقط، وتقابلها القيمة <code>left</code> على منصّة Android.
+
تُستخدم هذه الخاصية لتحديد محاذاة الخط، وتدعم منصّة iOS القيمة 'justify' فقط، وتقابلها القيمة <code>left</code> على منصّة Android.
  
 
{| class="wikitable"
 
{| class="wikitable"
سطر 422: سطر 422:
 
|قيمة اسمية
 
|قيمة اسمية
  
‏‏‏ enum('auto','left','right','center','justify')
+
<code>‪‏‏‏ enum('auto','left','right','center','justify')</code>
 
|لا
 
|لا
 
|}
 
|}
سطر 433: سطر 433:
 
|قيمة اسمية  
 
|قيمة اسمية  
  
enum('none','underline','line-through','underline line-through')
+
<code>‪enum('none','underline','line-through','underline line-through')</code>
 
|لا
 
|لا
 
|}
 
|}
سطر 442: سطر 442:
 
!'''مطلوب'''
 
!'''مطلوب'''
 
|-
 
|-
|[https://reactnative.dev/docs/colors لون]
+
|([https://reactnative.dev/docs/colors لون])
 
|لا
 
|لا
 
|}
 
|}
سطر 453: سطر 453:
 
|سلسلة نصية
 
|سلسلة نصية
  
string
+
(string)
 
|لا
 
|لا
 
|}
 
|}
سطر 464: سطر 464:
 
|رقم
 
|رقم
  
number
+
(number)
 
|لا
 
|لا
 
|}
 
|}
  
 
=== <code>includeFontPadding</code> ===
 
=== <code>includeFontPadding</code> ===
القيمة الافتراضية لها <code>true</code>، وعند إعطائها القيمة <code>false</code> فإنها تقوم بإزالة الحواشي الزائدة بهدف توفير الفراغ لأجزاء الأحرف الصّاعدة (ascenders) والنّازلة (descenders)، غير أن هذا قد يجعل النّصوص المكتوبة ببعض الخطوط تظهر بشكل غير مرتَّب قليلًا عند توسيطها عموديًا، يجب إعطاء الخاصيّة <code>textAlignVertical</code> القيمة <code>center</code> للحصول على نتيجةٍ أفضل .  
+
القيمة الافتراضية لها <code>true</code>، وعند إعطائها القيمة <code>false</code>، فإنها تقوم بإزالة الحواشي الزائدة بهدف توفير الفراغ لأجزاء الأحرف الصّاعدة (ascenders)، والنّازلة (descenders)، غير أن هذا قد يجعل النّصوص المكتوبة ببعض الخطوط تظهر غير مرتَّبة قليلًا عند توسيطها عموديًا، لذا يجب إعطاء الخاصيّة <code>textAlignVertical</code> القيمة <code>center</code> للحصول على نتيجةٍ أفضل.  
 
{| class="wikitable"
 
{| class="wikitable"
 
!'''النوع'''
 
!'''النوع'''
سطر 477: سطر 477:
 
|قيمة منطقية
 
|قيمة منطقية
  
bool
+
(bool)
 
|لا
 
|لا
 
|Android
 
|Android
سطر 503: سطر 503:
 
|مصفوفة قيم اسمية
 
|مصفوفة قيم اسمية
  
array of enum('small-caps','oldstyle-nums','lining-nums','tabular-nums','proportional-nums')
+
<code>‪array of enum('small-caps','oldstyle-nums','lining-nums','tabular-nums','proportional-nums')</code>
 
|لا
 
|لا
 
|iOS, Android>=5.0
 
|iOS, Android>=5.0
سطر 516: سطر 516:
 
|رقم
 
|رقم
  
number
+
(number)
 
|لا
 
|لا
 
|iOS, Android>=5.0
 
|iOS, Android>=5.0
سطر 527: سطر 527:
 
!'''المنصة'''
 
!'''المنصة'''
 
|-
 
|-
|[https://reactnative.dev/docs/colors لون]
+
|([https://reactnative.dev/docs/colors لون])
 
|لا
 
|لا
 
|iOS
 
|iOS
سطر 540: سطر 540:
 
|قيمة اسمية
 
|قيمة اسمية
  
enum('solid','double','dotted','dashed')
+
<code>‪enum('solid','double','dotted','dashed')</code>
 
|لا
 
|لا
 
|iOS
 
|iOS
سطر 552: سطر 552:
 
|قيمة اسمية
 
|قيمة اسمية
  
enum('none','uppercase','lowercase','capitalize')
+
‪<code>enum('none','uppercase','lowercase','capitalize')</code>
 
|لا
 
|لا
 
|}
 
|}
سطر 564: سطر 564:
 
|قيمة اسمية
 
|قيمة اسمية
  
enum('auto','ltr','rtl')
+
‪‏ <code>enum('auto','ltr','rtl')</code>
 
|لا
 
|لا
 
|iOS
 
|iOS
سطر 572: سطر 572:
  
 
* [https://facebook.github.io/react-native/docs/text-style-props صفحة Text Style Props في توثيق React Native الرسميّ]
 
* [https://facebook.github.io/react-native/docs/text-style-props صفحة Text Style Props في توثيق React Native الرسميّ]
 +
[[تصنيف:ReactNative]]

مراجعة 06:42، 7 يناير 2021

مثال

import React, { useState } from "react";
import { FlatList, Platform, ScrollView, Slider, StyleSheet, Switch, Text, TouchableWithoutFeedback, View } from "react-native";
import Constants from "expo-constants";

const fontStyles = ["normal", "italic"];
const fontVariants = [
  undefined,
  "small-caps",
  "oldstyle-nums",
  "lining-nums",
  "tabular-nums",
  "proportional-nums"
];
const fontWeights = [
  "normal",
  "bold",
  "100",
  "200",
  "300",
  "400",
  "500",
  "600",
  "700",
  "800",
  "900"
];
const textAlignments = ["auto", "left", "right", "center", "justify"];
const textDecorationLines = [
  "none",
  "underline",
  "line-through",
  "underline line-through"
];
const textDecorationStyles = ["solid", "double", "dotted", "dashed"];
const textTransformations = ["none", "uppercase", "lowercase", "capitalize"];
const textAlignmentsVertical = ["auto", "top", "bottom", "center"];
const writingDirections = ["auto", "ltr", "rtl"];

const App = () => {
  const [fontSize, setFontSize] = useState(10);
  const [fontStyleIdx, setFontStyleIdx] = useState(0);
  const [fontWeightIdx, setFontWeightIdx] = useState(0);
  const [lineHeight, setLineHeight] = useState(10);
  const [textAlignIdx, setTextAlignIdx] = useState(0);
  const [textDecorationLineIdx, setTextDecorationLineIdx] = useState(0);
  const [includeFontPadding, setIncludeFontPadding] = useState(false);
  const [textVerticalAlignIdx, setTextVerticalAlignIdx] = useState(0);
  const [fontVariantIdx, setFontVariantIdx] = useState(0);
  const [letterSpacing, setLetterSpacing] = useState(0);
  const [textDecorationStyleIdx, setTextDecorationStyleIdx] = useState(0);
  const [textTransformIdx, setTextTransformIdx] = useState(0);
  const [writingDirectionIdx, setWritingDirectionIdx] = useState(0);
  const [textShadowRadius, setTextShadowRadius] = useState(0);
  const [textShadowOffset, setTextShadowOffset] = useState({
    height: 0,
    width: 0
  });

  return (
    <View style={styles.container}>
      <Text
        style={[
          styles.paragraph,
          {
            fontSize,
            fontStyle: fontStyles[fontStyleIdx],
            fontWeight: fontWeights[fontWeightIdx],
            lineHeight,
            textAlign: textAlignments[textAlignIdx],
            textDecorationLine: textDecorationLines[textDecorationLineIdx],
            textTransform: textTransformations[textTransformIdx],
            textAlignVertical: textAlignmentsVertical[textVerticalAlignIdx],
            fontVariant: [fontVariants[fontVariantIdx]],
            letterSpacing,
            includeFontPadding,
            textDecorationStyle: textDecorationStyles[textDecorationStyleIdx],
            writingDirection: writingDirections[writingDirectionIdx],
            textShadowOffset,
            textShadowRadius
          }
        ]}
      >
        Lorem Ipsum is simply dummy text of the printing and typesetting
        industry. 112 Likes
      </Text>
      <ScrollView>
        <View>
          <Text>Common platform properties</Text>
          <CustomSlider
            label="Text Shadow Offset - Height"
            value={textShadowOffset.height}
            minimumValue={-40}
            maximumValue={40}
            handleValueChange={val =>
              setTextShadowOffset(prev => ({ ...prev, height: val }))
            }
          />
          <CustomSlider
            label="Text Shadow Offset - Width"
            value={textShadowOffset.width}
            minimumValue={-40}
            maximumValue={40}
            handleValueChange={val =>
              setTextShadowOffset(prev => ({ ...prev, width: val }))
            }
          />
          <CustomSlider
            label="Font Size"
            value={fontSize}
            maximumValue={40}
            handleValueChange={setFontSize}
          />
          <CustomPicker
            label="Font Style"
            data={fontStyles}
            currentIndex={fontStyleIdx}
            onSelected={setFontStyleIdx}
          />
          <CustomPicker
            label="Font Weight"
            data={fontWeights}
            currentIndex={fontWeightIdx}
            onSelected={setFontWeightIdx}
          />
          <CustomSlider
            label="Line Height"
            value={lineHeight}
            minimumValue={10}
            maximumValue={50}
            handleValueChange={setLineHeight}
          />
          <CustomPicker
            label="Text Align"
            data={textAlignments}
            currentIndex={textAlignIdx}
            onSelected={setTextAlignIdx}
          />
          <CustomPicker
            label="Text Decoration Line"
            data={textDecorationLines}
            currentIndex={textDecorationLineIdx}
            onSelected={setTextDecorationLineIdx}
          />
          <CustomSlider
            label="Text Shadow Radius"
            value={textShadowRadius}
            handleValueChange={setTextShadowRadius}
          />
          <CustomPicker
            label="Font Variant"
            data={fontVariants}
            currentIndex={fontVariantIdx}
            onSelected={setFontVariantIdx}
          />
          <CustomSlider
            label="Letter Spacing"
            step={0.1}
            value={letterSpacing}
            handleValueChange={setLetterSpacing}
          />
          <CustomPicker
            label="Text Transform"
            data={textTransformations}
            currentIndex={textTransformIdx}
            onSelected={setTextTransformIdx}
          />
        </View>
        {Platform.OS === "android" && (
          <View style={styles.platformContainer}>
            <Text style={styles.platformContainerTitle}>
              Android only properties
            </Text>
            <CustomPicker
              label="Text Vertical Align"
              data={textAlignmentsVertical}
              currentIndex={textVerticalAlignIdx}
              onSelected={setTextVerticalAlignIdx}
            />
            <CustomSwitch
              label="Include Font Padding"
              handleValueChange={setIncludeFontPadding}
              value={includeFontPadding}
            />
          </View>
        )}
        {Platform.OS === "ios" && (
          <View style={styles.platformContainer}>
            <Text style={styles.platformContainerTitle}>
              iOS only properties
            </Text>
            <CustomPicker
              label="Text Decoration Style"
              data={textDecorationStyles}
              currentIndex={textDecorationStyleIdx}
              onSelected={setTextDecorationStyleIdx}
            />
            <CustomPicker
              label="Writing Direction"
              data={writingDirections}
              currentIndex={writingDirectionIdx}
              onSelected={setWritingDirectionIdx}
            />
          </View>
        )}
      </ScrollView>
    </View>
  );
}

const CustomSwitch = ({ label, handleValueChange, value }) => {
  return (
    <>
      <Text style={styles.title}>{label}</Text>
      <View style={{ alignItems: "flex-start" }}>
        <Switch
          trackColor={{ false: "#767577", true: "#DAA520" }}
          thumbColor={value ? "#DAA520" : "#f4f3f4"}
          onValueChange={handleValueChange}
          value={value}
        />
      </View>
    </>
  );
}

const CustomSlider = ({
  label,
  handleValueChange,
  step = 1,
  minimumValue = 0,
  maximumValue = 10,
  value
}) => {
  return (
    <>
      {label && (
        <Text style={styles.title}>{`${label} (${value.toFixed(2)})`}</Text>
      )}
      <View style={styles.wrapperHorizontal}>
        <Slider
          thumbTintColor="#DAA520"
          minimumTrackTintColor="#DAA520"
          minimumValue={minimumValue}
          maximumValue={maximumValue}
          step={step}
          onValueChange={handleValueChange}
          value={value}
        />
      </View>
    </>
  );
}

const CustomPicker = ({ label, data, currentIndex, onSelected }) => {
  return (
    <>
      <Text style={styles.title}>{label}</Text>
      <View style={styles.wrapperHorizontal}>
        <FlatList
          bounces
          horizontal
          data={data}
          keyExtractor={(item, idx) => String(item)}
          renderItem={({ item, index }) => {
            const selected = index === currentIndex;
            return (
              <TouchableWithoutFeedback onPress={() => onSelected(index)}>
                <View
                  style={[
                    styles.itemStyleHorizontal,
                    selected && styles.itemSelectedStyleHorizontal
                  ]}
                >
                  <Text
                    style={{
                      textAlign: "center",
                      color: selected ? "black" : "grey",
                      fontWeight: selected ? "bold" : "normal"
                    }}
                  >
                    {item + ""}
                  </Text>
                </View>
              </TouchableWithoutFeedback>
            );
          }}
        />
      </View>
    </>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    paddingTop: Constants.statusBarHeight,
    backgroundColor: "#ecf0f1",
    padding: 8
  },
  paragraph: {
    color: "black",
    textDecorationColor: "yellow",
    textShadowColor: "red",
    textShadowRadius: 1,
    margin: 24
  },
  wrapperHorizontal: {
    height: 54,
    justifyContent: "center",
    color: "black",
    marginBottom: 12
  },
  itemStyleHorizontal: {
    marginRight: 10,
    height: 50,
    padding: 8,
    borderWidth: 1,
    borderColor: "grey",
    borderRadius: 25,
    textAlign: "center",
    justifyContent: "center"
  },
  itemSelectedStyleHorizontal: {
    borderWidth: 2,
    borderColor: "#DAA520"
  },
  platformContainer: {
    marginTop: 8,
    borderTopWidth: 1
  },
  platformContainerTitle: {
    marginTop: 8
  },
  title: {
    fontWeight: "bold",
    marginVertical: 4
  }
});

export default App;

الخاصيّات (Props)

textShadowOffset

النوع مطلوب
كائن

‏‎‏‪object{width:number,height:number}

لا

color

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

fontSize

النوع مطلوب
رقم

(number)

لا

fontStyle

النوع مطلوب
قيمة اسمية

‎‏‪enum('normal','italic')

لا

fontWeight

تُستخدم هذه الخاصية لتحديد ثخن الخط، ومعظم الخطوط تدعم القيمتين طبيعي 'normal'، وثخين 'bold'، بينما لا تدعم جميع الخطوط كلّ احتمالات القيم العدديّةٍ، لذا نختار أقرب قيمةٍ في هذه الحالة.

النوع مطلوب
قيمة اسمية

‪enum('normal','bold','100','200','300','400','500','600','700','800','900')

لا

lineHeight

النوع مطلوب
رقم

(number)

لا

textAlgin

تُستخدم هذه الخاصية لتحديد محاذاة الخط، وتدعم منصّة iOS القيمة 'justify' فقط، وتقابلها القيمة left على منصّة Android.

النوع مطلوب
قيمة اسمية

‪‏‏‏ enum('auto','left','right','center','justify')

لا

textDecorationLine

النوع مطلوب
قيمة اسمية

‪enum('none','underline','line-through','underline line-through')

لا

textShadowColor

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

fontFamily

النوع مطلوب
سلسلة نصية

(string)

لا

textShadowRadious

النوع مطلوب
رقم

(number)

لا

includeFontPadding

القيمة الافتراضية لها true، وعند إعطائها القيمة false، فإنها تقوم بإزالة الحواشي الزائدة بهدف توفير الفراغ لأجزاء الأحرف الصّاعدة (ascenders)، والنّازلة (descenders)، غير أن هذا قد يجعل النّصوص المكتوبة ببعض الخطوط تظهر غير مرتَّبة قليلًا عند توسيطها عموديًا، لذا يجب إعطاء الخاصيّة textAlignVertical القيمة center للحصول على نتيجةٍ أفضل.

النوع مطلوب المنصة
قيمة منطقية

(bool)

لا Android

textAlignVerticaly

النوع مطلوب المنصة
قيمة اسمية

‪enum('auto','top','bottom','center')

لا Android

fontVariant

النوع مطلوب المنصة
مصفوفة قيم اسمية

‪array of enum('small-caps','oldstyle-nums','lining-nums','tabular-nums','proportional-nums')

لا iOS, Android>=5.0

letterSpacin

النوع مطلوب المنصة
رقم

(number)

لا iOS, Android>=5.0

textDecorationColor

النوع مطلوب المنصة
(لون) لا iOS

textDecorationStyle

النوع مطلوب المنصة
قيمة اسمية

‪enum('solid','double','dotted','dashed')

لا iOS

textTransForm

النوع مطلوب
قيمة اسمية

enum('none','uppercase','lowercase','capitalize')

لا

writingDirection

النوع مطلوب المنصة
قيمة اسمية

‪‏ enum('auto','ltr','rtl')

لا iOS

مصادر