تنظیم رنگ پس زمینه Root View در react native
سلام دوستان . در این آموزش متنی قصد داریم یاد بگیریم که چجوری رنگ پس زمینه (backgroundColor) Root View در React Native رو تنظیم کنیم.
React Native از ساختار root view مانند HTML و JQuery پشتیبانی میکنه.شما باید یک کامپوننت View به عنوان والد در نظر بگیرید و کامپوننت های دیگه رو درون این View والد قرار بدین.بنابراین با تغییر رنگ پس زمینه View والد رنگ پس زمینه صفحه نمایش تغییر میکنه.پس بیاین شروع کنیم.
1.ساخت یک پروژه جدید.اگه نمیدونید چطور اینکارو بکنید،پیشنهاد میکنم دوره آموزش مقدماتی react native رو ببینید(برای مک هم میتونید مقاله آموزش نصب react native بر روی مک رو مطالعه کنید)
2.اضافه کردن کامپوننت های Image,StyleSheet و View در بلاک import
1 2 3 | import { AppRegistry, StyleSheet, View } from 'react-native'; |
3.اضافه کردن تگ View در بلاک render return
1 2 3 4 5 6 7 8 9 10 | render() { return ( <View> </View> ); } |
4.ایجاد StyleSheet در بالای خط کد AppRegistry.registerComponent
1 2 3 4 5 | const styles = StyleSheet.create( { }); |
5.ایجاد کردن استایل Container برای View والد درون StyleSheet که به ما اجازه میده رنگ پس زمینه رو با استفاده از صفت backgroundColor تغییر بدیم
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 | const styles = StyleSheet.create( { MainContainer: { flex: 1, // Set content's vertical alignment. justifyContent: 'center', // Set content's horizontal alignment. alignItems: 'center', // Set hex color code here. backgroundColor: '#FFEB3B', } }); |
6.ضافه کردن استایل ها به تگ View
1 2 3 | <View style = {styles.MainContainer}> </View> |
7.کد کامل برنامه در فایل 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 | import React, { Component } from 'react'; import { AppRegistry, StyleSheet, View } from 'react-native'; export default class Myproject extends Component { render() { return ( <View style = {styles.MainContainer}> </View> ); } } const styles = StyleSheet.create( { MainContainer: { flex: 1, // Set content's vertical alignment. justifyContent: 'center', // Set content's horizontal alignment. alignItems: 'center', // Set hex color code here. backgroundColor: '#FFEB3B', } }); AppRegistry.registerComponent('Myproject', () => Myproject); |
اسکرین شات:
ممکن است همچنین دوست داشته باشید
استفاده از نقشه گوگل در react native
تشخیص حالت Background در اپلیکیشن های react native
