تنظیم اندازه متن در react native
سلام دوستان . در این آموزش متنی قصد داریم یاد بگیریم که چجوری اندازه متن رو با استفاده از StyleSheet تنظیم کنیم.در react native اندازه متن با استفاده از مشخصه fontSize سفارشی سازی میشه.شما میتونید با استفاده از عدد اندازه متن رو با توجه به نیازتون مشخص کنید.
1.ساخت یک پروژه جدید.اگه نمیدونید چطور اینکارو بکنید،پیشنهاد میکنم دوره آموزش مقدماتی react native رو ببینید(برای مک هم میتونید مقاله آموزش نصب react native بر روی مک رو مطالعه کنید)
2.اضافه کردن کامپوننت های Text,StyleSheet و View در بلاک import
|
1 |
import { AppRegistry, StyleSheet, Text, View } from 'react-native'; |
3.اضافه کردن تگ View در بلاک render return
|
1 2 3 4 5 6 7 8 9 10 11 |
render() { return ( <View> </View> ); } |
4.اضافه کردن استایل inline به View
|
1 2 3 4 5 6 7 8 9 10 11 |
render() { return ( <View style = {{alignItems: 'center'}}> </View> ); } |
5.اضافه کردن 3 کامپوننت Text داخل View
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 |
render() { return ( <View style = {{alignItems: 'center'}}> <Text>Sample Text 1</Text> <Text>Sample Text 2</Text> <Text>Sample Text 3</Text> </View> ); } |
6.ایجاد StyleSheet در بالای خط کد AppRegistry.registerComponent
|
1 2 3 4 |
const styles = StyleSheet.create({ }); |
7.ایجاد استایل های One, Two and Three درون StyleSheet
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 |
const styles = StyleSheet.create({ One: { // Define font size here in Pixels fontSize : 20 }, Two: { // Define font size here in Pixels fontSize : 25 }, Three:{ // Define font size here in Pixels fontSize : 30 } }); |
8.فراخوانی استایل ها در هر کامپوننت Text
|
1 2 3 4 5 6 7 8 9 |
<View style = {{alignItems: 'center'}}> <Text style={styles.One}>Sample Text 1</Text> <Text style={styles.Two}>Sample Text 2</Text> <Text style={[styles.Three]}>Sample Text 3</Text> </View> |
9.کد کامل برنامه در فایل index.js
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 |
import React, { Component } from 'react'; import { AppRegistry, StyleSheet, Text, View } from 'react-native'; class Myproject extends Component { render() { return ( <View style = {{alignItems: 'center'}}> <Text style={styles.One}>Sample Text 1</Text> <Text style={styles.Two}>Sample Text 2</Text> <Text style={[styles.Three]}>Sample Text 3</Text> </View> ); } } const styles = StyleSheet.create({ One: { // Define font size here in Pixels fontSize : 20 }, Two: { // Define font size here in Pixels fontSize : 25 }, Three:{ // Define font size here in Pixels fontSize : 30 } }); AppRegistry.registerComponent('Myproject', () => Myproject); |
اسکرین شات:
مطالب زیر را حتما مطالعه کنید
چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟
آموزش آرایه در جاوا اسکریپت ( JavaScript)
استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)
نمایش PDF در react native
ایجاد Timeline ListView در React Native
دیدگاهتان را بنویسید