تنظیم رنگ متن در react native
سلام دوستان . در این آموزش متنی قصد داریم یاد بگیریم که چجوری رنگ متن ها رو با استفاده از کامپوننت StyleSheet تنظیم کنیم.کامپوننت Text یکی از پرکاربردترین کامپوننت ها در react native است.بنابراین در این آموزش ما رنگ متن ها رو با استفاده از Hex color مشخص میکنیم.
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 |
render() { return ( <View> </View> ); } |
4.اضافه کردن استایل inline به View
|
1 2 3 4 5 6 7 8 9 10 |
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>This is Red Color Text</Text> <Text>This is Purple Color Text</Text> <Text>This is orange Color Text</Text> </View> ); } |
6.ایجاد StyleSheet در بالای خط کد AppRegistry.registerComponent
|
1 2 3 4 |
const styles = StyleSheet.create({ }); |
7.ایجاد 3 استایل Purple, Red and Orange درون 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({ Purple: { // Define your HEX color code here. color: '#9C27B0', }, Red: { // Define your HEX color code here. color: '#F44336' }, Orange:{ // Define your HEX color code here. color : '#FF9800' } }); |
8.فراخوانی استایل ها در هر کامپوننت Text
|
1 2 3 4 5 6 7 8 9 |
<View style = {{alignItems: 'center'}}> <Text style={styles.Red}>This is Red Color Text</Text> <Text style={styles.Purple}>This is Purple Color Text</Text> <Text style={[styles.Orange]}>This is orange Color Text</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.Red}>This is Red Color Text</Text> <Text style={styles.Purple}>This is Purple Color Text</Text> <Text style={[styles.Orange]}>This is orange Color Text</Text> </View> ); } } const styles = StyleSheet.create({ Purple: { // Define your HEX color code here. color: '#9C27B0', }, Red: { // Define your HEX color code here. color: '#F44336' }, Orange:{ // Define your HEX color code here. color : '#FF9800' } }); AppRegistry.registerComponent('Myproject', () => Myproject); |
اسکرین شات:
پاسخی بگذارید