تنظیم رنگ متن در react native

سلام دوستان . در این آموزش متنی قصد داریم یاد بگیریم که چجوری رنگ متن ها رو با استفاده از کامپوننت StyleSheet تنظیم کنیم.کامپوننت Text یکی از پرکاربردترین کامپوننت ها در react native است.بنابراین در این آموزش ما رنگ متن ها رو با استفاده از Hex color مشخص میکنیم.

1.ساخت یک پروژه جدید.اگه نمیدونید چطور اینکارو بکنید،پیشنهاد میکنم دوره آموزش مقدماتی react native رو ببینید(برای مک هم میتونید مقاله آموزش نصب react native بر روی مک رو مطالعه کنید)

2.اضافه کردن کامپوننت های Text,StyleSheet و View در بلاک import

import { AppRegistry, StyleSheet, Text, View } from 'react-native';

1	import { AppRegistry, StyleSheet, Text, View } from 'react-native';

3.اضافه کردن تگ View در بلاک render return

render() {
    return (
  
      <View>
        
       
      </View>
 
    );
  }

render() {

return (

<View>

</View>

);

}

4.اضافه کردن استایل inline به View

render() {
    return (
  
      <View style = {{alignItems: 'center'}}>
        
        
      </View>
 
    );
  }

render() {

return (

</View>

);

}

5.اضافه کردن 3 کامپوننت Text درون View

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>
 
    );
  }

render() {

return (

<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

const styles = StyleSheet.create({
  
 
});

const styles = StyleSheet.create({

});

7.ایجاد 3 استایل Purple, Red and Orange درون StyleSheet

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'
    
  }
});

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

آموزش React Native - ایجاد Radio Button

<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>

<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

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);

import React, { Component } from 'react';

import { AppRegistry, StyleSheet, Text, View } from 'react-native';

class Myproject extends Component {

render() {

return (

<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);

اسکرین شات:

تنظیم رنگ متن در react native

مطالب زیر را حتما مطالعه کنید

دیدگاهتان را بنویسید لغو پاسخ

مطالب زیر را حتما مطالعه کنید

چگونه از ماژول های نیتیو Android و IOS در React Native استفاده کنیم؟

آموزش آرایه در جاوا اسکریپت ( JavaScript)

استفاده از Flipper در پروژه های ری اکت نیتیو (React Native)

نمایش PDF در react native

ایجاد Timeline ListView در React Native

آموزش React Navigation 5

دیدگاهتان را بنویسید لغو پاسخ