الفرق بين المراجعتين ل"ReactNative/text style props"
اذهب إلى التنقل
اذهب إلى البحث
جميل-بيلوني (نقاش | مساهمات) ط (مراجعة) |
جميل-بيلوني (نقاش | مساهمات) ط |
||
سطر 540: | سطر 540: | ||
* [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]] | [[تصنيف:ReactNative]] | ||
+ | [[تصنيف:React Native Component]] |
المراجعة الحالية بتاريخ 14:05، 9 أكتوبر 2021
خاصيات تنسيق النصوص (Text Style Props) في React Native.
مثال
إليك المثال التالي (تجربة حية):
import React, { useState } from "react";
import { FlatList, Platform, ScrollView, Slider, StatusBar, StyleSheet, Switch, Text, TouchableWithoutFeedback, View } from "react-native";
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: StatusBar.currentHeight,
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)
color
النوع | مطلوب |
---|---|
(لون) | لا |
fontFamily
النوع | مطلوب |
---|---|
سلسلة نصية (string) | لا |
fontSize
النوع | مطلوب |
---|---|
عدد (number) | لا |
fontStyle
النوع | مطلوب |
---|---|
('normal','italic') | لا |
fontWeight
تُستخدم هذه الخاصية لتحديد ثخن الخط، ومعظم الخطوط تدعم القيمتين طبيعي 'normal'، وثخين 'bold'، بينما لا تدعم جميع الخطوط كلّ احتمالات القيم العدديّةٍ، لذا نختار أقرب قيمةٍ في هذه الحالة.
النوع | مطلوب |
---|---|
('normal','bold','100','200','300','400','500','600','700','800','900') | لا |
includeFontPadding
القيمة الافتراضية لها true
، وعند إعطائها القيمة false
، فإنها تقوم بإزالة الحواشي الزّائدة بهدف توفير الفراغ لأجزاء الأحرف الصّاعدة (ascenders)، والنّازلة (descenders)، غير أن هذا قد يجعل النّصوص المكتوبة ببعض الخطوط تظهر غير مرتَّبة قليلًا عند توسيطها عموديًا، لذا يجب إعطاء الخاصيّة textAlignVertical
القيمة center
للحصول على نتيجةٍ أفضل.
النوع | مطلوب | المنصة |
---|---|---|
قيمة منطقية (bool) | لا | Android |
fontVariant
النوع | مطلوب | المنصة |
---|---|---|
مصفوفة من القيم ('small-caps','oldstyle-nums','lining-nums','tabular-nums','proportional-nums') | لا | iOS, Android>=5.0 |
letterSpacin
النوع | مطلوب | المنصة |
---|---|---|
عدد (number) | لا | iOS, Android>=5.0 |
lineHeight
النوع | مطلوب |
---|---|
عدد (number) | لا |
textAlgin
تُستخدم هذه الخاصية لتحديد محاذاة الخط، وتدعم منصّة iOS القيمة 'justify' فقط، وتقابلها القيمة left
على منصّة Android.
النوع | مطلوب |
---|---|
('auto','left','right','center','justify') | لا |
textAlignVerticaly
النوع | مطلوب | المنصة |
---|---|---|
('auto','top','bottom','center') | لا | Android |
textDecorationColor
النوع | مطلوب | المنصة |
---|---|---|
(لون) | لا | iOS |
textDecorationLine
النوع | مطلوب |
---|---|
('none','underline','line-through','underline line-through') | لا |
textDecorationStyle
النوع | مطلوب | المنصة |
---|---|---|
('solid','double','dotted','dashed') | لا | iOS |
textShadowColor
النوع | مطلوب |
---|---|
(لون) | لا |
textShadowOffset
النوع | مطلوب |
---|---|
كائن{width:number,height:number}
|
لا |
textShadowRadious
النوع | مطلوب |
---|---|
عدد (number) | لا |
textTransForm
النوع | مطلوب |
---|---|
('none','uppercase','lowercase','capitalize') | لا |
writingDirection
النوع | مطلوب | المنصة |
---|---|---|
('auto','ltr','rtl') | لا | iOS |