الفرق بين المراجعتين ل"ReactNative/text style props"
رقية-بورية (نقاش | مساهمات) (أنشأ الصفحة ب'= Text Style Props = == مثال == <syntaxhighlight lang="javascript"> import React, { useState } from "react"; import { FlatList, Platform, ScrollView, Slider, StyleS...') |
رقية-بورية (نقاش | مساهمات) ط (مراجعة) |
||
سطر 1: | سطر 1: | ||
− | + | <noinclude>{{DISPLAYTITLE:Text Style Props في React Native}}</noinclude> | |
− | + | __toc__ | |
== مثال == | == مثال == | ||
<syntaxhighlight lang="javascript"> | <syntaxhighlight lang="javascript"> | ||
سطر 355: | سطر 355: | ||
|كائن | |كائن | ||
− | + | 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: | ||
|قيمة اسمية | |قيمة اسمية | ||
− | + | <code>enum('normal','italic')</code> | |
|لا | |لا | ||
|} | |} | ||
=== <code>fontWeight</code> === | === <code>fontWeight</code> === | ||
− | تُستخدم لتحديد ثخن الخط، ومعظم الخطوط تدعم القيمتين طبيعي 'normal' وثخين 'bold' | + | تُستخدم هذه الخاصية لتحديد ثخن الخط، ومعظم الخطوط تدعم القيمتين طبيعي 'normal'، وثخين 'bold'، بينما لا تدعم جميع الخطوط كلّ احتمالات القيم العدديّةٍ، لذا نختار أقرب قيمةٍ في هذه الحالة. |
{| class="wikitable" | {| class="wikitable" | ||
!'''النوع''' | !'''النوع''' | ||
سطر 398: | سطر 398: | ||
|قيمة اسمية | |قيمة اسمية | ||
− | + | <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. | |
{| class="wikitable" | {| class="wikitable" | ||
سطر 422: | سطر 422: | ||
|قيمة اسمية | |قيمة اسمية | ||
− | + | <code> enum('auto','left','right','center','justify')</code> | |
|لا | |لا | ||
|} | |} | ||
سطر 433: | سطر 433: | ||
|قيمة اسمية | |قيمة اسمية | ||
− | + | <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>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: | ||
|مصفوفة قيم اسمية | |مصفوفة قيم اسمية | ||
− | + | <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: | ||
|قيمة اسمية | |قيمة اسمية | ||
− | + | <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: | ||
|قيمة اسمية | |قيمة اسمية | ||
− | + | <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 |
لا |
color
النوع | مطلوب |
---|---|
(لون) | لا |
fontSize
النوع | مطلوب |
---|---|
رقم
(number) |
لا |
fontStyle
النوع | مطلوب |
---|---|
قيمة اسمية
|
لا |
fontWeight
تُستخدم هذه الخاصية لتحديد ثخن الخط، ومعظم الخطوط تدعم القيمتين طبيعي 'normal'، وثخين 'bold'، بينما لا تدعم جميع الخطوط كلّ احتمالات القيم العدديّةٍ، لذا نختار أقرب قيمةٍ في هذه الحالة.
النوع | مطلوب |
---|---|
قيمة اسمية
|
لا |
lineHeight
النوع | مطلوب |
---|---|
رقم
(number) |
لا |
textAlgin
تُستخدم هذه الخاصية لتحديد محاذاة الخط، وتدعم منصّة iOS القيمة 'justify' فقط، وتقابلها القيمة left
على منصّة Android.
النوع | مطلوب |
---|---|
قيمة اسمية
|
لا |
textDecorationLine
النوع | مطلوب |
---|---|
قيمة اسمية
|
لا |
textShadowColor
النوع | مطلوب |
---|---|
(لون) | لا |
fontFamily
النوع | مطلوب |
---|---|
سلسلة نصية
(string) |
لا |
textShadowRadious
النوع | مطلوب |
---|---|
رقم
(number) |
لا |
includeFontPadding
القيمة الافتراضية لها true
، وعند إعطائها القيمة false
، فإنها تقوم بإزالة الحواشي الزائدة بهدف توفير الفراغ لأجزاء الأحرف الصّاعدة (ascenders)، والنّازلة (descenders)، غير أن هذا قد يجعل النّصوص المكتوبة ببعض الخطوط تظهر غير مرتَّبة قليلًا عند توسيطها عموديًا، لذا يجب إعطاء الخاصيّة textAlignVertical
القيمة center
للحصول على نتيجةٍ أفضل.
النوع | مطلوب | المنصة |
---|---|---|
قيمة منطقية
(bool) |
لا | Android |
textAlignVerticaly
النوع | مطلوب | المنصة |
---|---|---|
قيمة اسمية
enum('auto','top','bottom','center') |
لا | Android |
fontVariant
النوع | مطلوب | المنصة |
---|---|---|
مصفوفة قيم اسمية
|
لا | iOS, Android>=5.0 |
letterSpacin
النوع | مطلوب | المنصة |
---|---|---|
رقم
(number) |
لا | iOS, Android>=5.0 |
textDecorationColor
النوع | مطلوب | المنصة |
---|---|---|
(لون) | لا | iOS |
textDecorationStyle
النوع | مطلوب | المنصة |
---|---|---|
قيمة اسمية
|
لا | iOS |
textTransForm
النوع | مطلوب |
---|---|
قيمة اسمية
|
لا |
writingDirection
النوع | مطلوب | المنصة |
---|---|---|
قيمة اسمية
|
لا | iOS |