{"id":435,"date":"2021-09-22T22:02:33","date_gmt":"2021-09-22T19:02:33","guid":{"rendered":"https:\/\/mryed.com\/?p=435"},"modified":"2022-09-04T18:56:31","modified_gmt":"2022-09-04T15:56:31","slug":"react-native-resim-ekleme","status":"publish","type":"post","link":"https:\/\/mryed.com\/en\/yazilim\/react-native-resim-ekleme\/","title":{"rendered":"React Native Resim Ekleme &#8211; Image Background"},"content":{"rendered":"<p>React Native ba\u015flang\u0131\u00e7 \u00f6rneklerine devam ediyorum. Temel olarak react native resim ekleme nas\u0131l yap\u0131l\u0131r, geni\u015flik ve y\u00fckseklik nas\u0131l verilir? Basit bir \u00f6rnekle arka plan g\u00f6rseli ekledim.<\/p>\n\n\n\n<!--more-->\n\n\n\n<h2 class=\"wp-block-heading\">React Native Resim Ekleme<\/h2>\n\n\n\n<p>\u00d6rnekte uygulamaya bir arka plan ve arka plan \u00fcst\u00fcne bir g\u00f6rsel ekledim. G\u00f6rsel eklemeden \u00f6nce <em><a href=\"https:\/\/mryed.com\/en\/yazilim\/react-native-baslangic-seviyesi\/\">React Native<\/a><\/em> k\u00fct\u00fcphanesinden ImageBackground ve Image import ediyoruz. Pencerenin geni\u015flik ve y\u00fckseli\u011fini almak i\u00e7in Dimensions kullan\u0131yoruz.<\/p>\n\n\n\n<div class=\"wp-block-columns is-layout-flex wp-container-core-columns-is-layout-9d6595d7 wp-block-columns-is-layout-flex\">\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:66.66%\">\n<pre class=\"wp-block-code\"><code>import * as React from 'react';\nimport { ImageBackground,Dimensions,Image } from 'react-native';\n\nconst {width,height} = Dimensions.get('window');\n\nclass App extends React.Component\n{\n    render()\n    {\n        return(\n                &lt;ImageBackground\n                source={require('..\/src\/img\/arkaplan.jpg')}\n                style={{width,height,alignItems:'center'}}&gt;\n                    &lt;Image\n                    source={require('..\/src\/img\/giris.png')}&gt;\n                    &lt;\/Image&gt;\n                &lt;\/ImageBackground&gt;\n        );\n    }\n}\nexport default App;<\/code><\/pre>\n<\/div>\n\n\n\n<div class=\"wp-block-column is-layout-flow wp-block-column-is-layout-flow\" style=\"flex-basis:33.33%\">\n<figure class=\"wp-block-image size-full\"><img loading=\"lazy\" decoding=\"async\" width=\"397\" height=\"724\" src=\"https:\/\/mryed.com\/wp-content\/uploads\/2021\/09\/react-native-gorsel-ekleme.png\" alt=\"\" class=\"wp-image-437\" srcset=\"https:\/\/mryed.com\/wp-content\/uploads\/2021\/09\/react-native-gorsel-ekleme.png 397w, https:\/\/mryed.com\/wp-content\/uploads\/2021\/09\/react-native-gorsel-ekleme-165x300.png 165w\" sizes=\"auto, (max-width: 397px) 100vw, 397px\" \/><figcaption>react-native-image-backgorund<\/figcaption><\/figure>\n<\/div>\n<\/div>\n\n\n\n<p>Kullanaca\u011f\u0131m g\u00f6rselleri uygulama dosyas\u0131nda bulunan src klas\u00f6r\u00fcn\u00fcn i\u00e7erisinde ki img klas\u00f6r\u00fcne y\u00fckledim. Daha sonra &#8216;source&#8217; ile bu yolu belirterek resimleri \u00e7ektim. Arka plan g\u00f6rselinin geni\u015flik ve y\u00fcksekli\u011fini dimensions ile belirledim. Bu sayede arka plan tam ekran oldu.<\/p>\n\n\n\n<p>React native&#8217;de g\u00f6rsel ekleme bu kadar k\u0131sa ve basit. Bu alanda \u00f6\u011frendiklerimi vakit bulduk\u00e7a payla\u015fmaya devam edece\u011fim.<\/p>","protected":false},"excerpt":{"rendered":"<p>React Native ba\u015flang\u0131\u00e7 \u00f6rneklerine devam ediyorum. Temel olarak react native resim ekleme nas\u0131l yap\u0131l\u0131r, geni\u015flik ve y\u00fckseklik nas\u0131l verilir? Basit bir \u00f6rnekle arka plan g\u00f6rseli ekledim.<\/p>","protected":false},"author":1,"featured_media":436,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[23,64,11],"tags":[48,49],"class_list":["post-435","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-kodlama","category-react","category-yazilim","tag-react-native-image-background","tag-react-native-image-resizemode"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v27.2 - https:\/\/yoast.com\/product\/yoast-seo-wordpress\/ -->\n<title>React Native Resim Ekleme - Image Background - Yunus Emre<\/title>\n<meta name=\"description\" content=\"Temel olarak react native resim ekleme nas\u0131l yap\u0131l\u0131r, geni\u015flik ve y\u00fckseklik nas\u0131l verilir? Basit bir \u00f6rnekle arka plan g\u00f6rseli ekledim.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/mryed.com\/en\/yazilim\/react-native-resim-ekleme\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"React Native Resim Ekleme - Image Background - Yunus Emre\" \/>\n<meta property=\"og:description\" content=\"Temel olarak react native resim ekleme nas\u0131l yap\u0131l\u0131r, geni\u015flik ve y\u00fckseklik nas\u0131l verilir? Basit bir \u00f6rnekle arka plan g\u00f6rseli ekledim.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/mryed.com\/en\/yazilim\/react-native-resim-ekleme\/\" \/>\n<meta property=\"og:site_name\" content=\"Yunus Emre\" \/>\n<meta property=\"article:published_time\" content=\"2021-09-22T19:02:33+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2022-09-04T15:56:31+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/mryed.com\/wp-content\/uploads\/2021\/09\/react-native-resim-ekleme.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1920\" \/>\n\t<meta property=\"og:image:height\" content=\"900\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Mr.YED\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Mr.YED\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"1 minute\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/\"},\"author\":{\"name\":\"Mr.YED\",\"@id\":\"https:\/\/mryed.com\/#\/schema\/person\/4bb44b3409df8d51fc489343880ffea1\"},\"headline\":\"React Native Resim Ekleme &#8211; Image Background\",\"datePublished\":\"2021-09-22T19:02:33+00:00\",\"dateModified\":\"2022-09-04T15:56:31+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/\"},\"wordCount\":161,\"commentCount\":3,\"publisher\":{\"@id\":\"https:\/\/mryed.com\/#\/schema\/person\/4bb44b3409df8d51fc489343880ffea1\"},\"image\":{\"@id\":\"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mryed.com\/wp-content\/uploads\/2021\/09\/react-native-resim-ekleme.png\",\"keywords\":[\"React native image background\",\"React native image resizeMode\"],\"articleSection\":[\"Kodlama\",\"React\",\"Yaz\u0131l\u0131m\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/\",\"url\":\"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/\",\"name\":\"React Native Resim Ekleme - Image Background - Yunus Emre\",\"isPartOf\":{\"@id\":\"https:\/\/mryed.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/mryed.com\/wp-content\/uploads\/2021\/09\/react-native-resim-ekleme.png\",\"datePublished\":\"2021-09-22T19:02:33+00:00\",\"dateModified\":\"2022-09-04T15:56:31+00:00\",\"description\":\"Temel olarak react native resim ekleme nas\u0131l yap\u0131l\u0131r, geni\u015flik ve y\u00fckseklik nas\u0131l verilir? Basit bir \u00f6rnekle arka plan g\u00f6rseli ekledim.\",\"breadcrumb\":{\"@id\":\"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/#primaryimage\",\"url\":\"https:\/\/mryed.com\/wp-content\/uploads\/2021\/09\/react-native-resim-ekleme.png\",\"contentUrl\":\"https:\/\/mryed.com\/wp-content\/uploads\/2021\/09\/react-native-resim-ekleme.png\",\"width\":1920,\"height\":900},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Anasayfa\",\"item\":\"https:\/\/mryed.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"React Native Resim Ekleme &#8211; Image Background\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/mryed.com\/#website\",\"url\":\"https:\/\/mryed.com\/\",\"name\":\"Yunus Emre\",\"description\":\"Software Engineer\",\"publisher\":{\"@id\":\"https:\/\/mryed.com\/#\/schema\/person\/4bb44b3409df8d51fc489343880ffea1\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/mryed.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":[\"Person\",\"Organization\"],\"@id\":\"https:\/\/mryed.com\/#\/schema\/person\/4bb44b3409df8d51fc489343880ffea1\",\"name\":\"Mr.YED\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/mryed.com\/wp-content\/uploads\/2021\/03\/yunus-emre-demirel.png\",\"url\":\"https:\/\/mryed.com\/wp-content\/uploads\/2021\/03\/yunus-emre-demirel.png\",\"contentUrl\":\"https:\/\/mryed.com\/wp-content\/uploads\/2021\/03\/yunus-emre-demirel.png\",\"width\":360,\"height\":360,\"caption\":\"Mr.YED\"},\"logo\":{\"@id\":\"https:\/\/mryed.com\/wp-content\/uploads\/2021\/03\/yunus-emre-demirel.png\"},\"description\":\"Mobil, web ve Microsoft tabanl\u0131 uygulamalar geli\u015ftiren bir yaz\u0131l\u0131m m\u00fchendisiyim. Kariyerim boyunca farkl\u0131 sekt\u00f6rlerde edindi\u011fim deneyimlerle \u00f6zellikle Power Platform, Power Apps, Power Automate ve kurumsal s\u00fcre\u00e7 otomasyonu konular\u0131nda uzmanla\u015ft\u0131m. Bu blogda yaz\u0131l\u0131m geli\u015ftirme, otomasyon ve Microsoft teknolojileri \u00fczerine edindi\u011fim tecr\u00fcbeleri payla\u015f\u0131yorum.\",\"sameAs\":[\"http:\/\/mryed.com\",\"https:\/\/www.linkedin.com\/in\/yunus-emre-demirel\/\"]}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"React Native Resim Ekleme - Image Background - Yunus Emre","description":"Temel olarak react native resim ekleme nas\u0131l yap\u0131l\u0131r, geni\u015flik ve y\u00fckseklik nas\u0131l verilir? Basit bir \u00f6rnekle arka plan g\u00f6rseli ekledim.","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/mryed.com\/en\/yazilim\/react-native-resim-ekleme\/","og_locale":"en_US","og_type":"article","og_title":"React Native Resim Ekleme - Image Background - Yunus Emre","og_description":"Temel olarak react native resim ekleme nas\u0131l yap\u0131l\u0131r, geni\u015flik ve y\u00fckseklik nas\u0131l verilir? Basit bir \u00f6rnekle arka plan g\u00f6rseli ekledim.","og_url":"https:\/\/mryed.com\/en\/yazilim\/react-native-resim-ekleme\/","og_site_name":"Yunus Emre","article_published_time":"2021-09-22T19:02:33+00:00","article_modified_time":"2022-09-04T15:56:31+00:00","og_image":[{"width":1920,"height":900,"url":"https:\/\/mryed.com\/wp-content\/uploads\/2021\/09\/react-native-resim-ekleme.png","type":"image\/png"}],"author":"Mr.YED","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Mr.YED","Est. reading time":"1 minute"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/#article","isPartOf":{"@id":"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/"},"author":{"name":"Mr.YED","@id":"https:\/\/mryed.com\/#\/schema\/person\/4bb44b3409df8d51fc489343880ffea1"},"headline":"React Native Resim Ekleme &#8211; Image Background","datePublished":"2021-09-22T19:02:33+00:00","dateModified":"2022-09-04T15:56:31+00:00","mainEntityOfPage":{"@id":"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/"},"wordCount":161,"commentCount":3,"publisher":{"@id":"https:\/\/mryed.com\/#\/schema\/person\/4bb44b3409df8d51fc489343880ffea1"},"image":{"@id":"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/#primaryimage"},"thumbnailUrl":"https:\/\/mryed.com\/wp-content\/uploads\/2021\/09\/react-native-resim-ekleme.png","keywords":["React native image background","React native image resizeMode"],"articleSection":["Kodlama","React","Yaz\u0131l\u0131m"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/","url":"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/","name":"React Native Resim Ekleme - Image Background - Yunus Emre","isPartOf":{"@id":"https:\/\/mryed.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/#primaryimage"},"image":{"@id":"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/#primaryimage"},"thumbnailUrl":"https:\/\/mryed.com\/wp-content\/uploads\/2021\/09\/react-native-resim-ekleme.png","datePublished":"2021-09-22T19:02:33+00:00","dateModified":"2022-09-04T15:56:31+00:00","description":"Temel olarak react native resim ekleme nas\u0131l yap\u0131l\u0131r, geni\u015flik ve y\u00fckseklik nas\u0131l verilir? Basit bir \u00f6rnekle arka plan g\u00f6rseli ekledim.","breadcrumb":{"@id":"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/#primaryimage","url":"https:\/\/mryed.com\/wp-content\/uploads\/2021\/09\/react-native-resim-ekleme.png","contentUrl":"https:\/\/mryed.com\/wp-content\/uploads\/2021\/09\/react-native-resim-ekleme.png","width":1920,"height":900},{"@type":"BreadcrumbList","@id":"https:\/\/mryed.com\/yazilim\/react-native-resim-ekleme\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Anasayfa","item":"https:\/\/mryed.com\/"},{"@type":"ListItem","position":2,"name":"React Native Resim Ekleme &#8211; Image Background"}]},{"@type":"WebSite","@id":"https:\/\/mryed.com\/#website","url":"https:\/\/mryed.com\/","name":"Yunus Emre","description":"Software Engineer","publisher":{"@id":"https:\/\/mryed.com\/#\/schema\/person\/4bb44b3409df8d51fc489343880ffea1"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/mryed.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":["Person","Organization"],"@id":"https:\/\/mryed.com\/#\/schema\/person\/4bb44b3409df8d51fc489343880ffea1","name":"Mr.YED","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/mryed.com\/wp-content\/uploads\/2021\/03\/yunus-emre-demirel.png","url":"https:\/\/mryed.com\/wp-content\/uploads\/2021\/03\/yunus-emre-demirel.png","contentUrl":"https:\/\/mryed.com\/wp-content\/uploads\/2021\/03\/yunus-emre-demirel.png","width":360,"height":360,"caption":"Mr.YED"},"logo":{"@id":"https:\/\/mryed.com\/wp-content\/uploads\/2021\/03\/yunus-emre-demirel.png"},"description":"I am a software engineer who develops mobile, web, and Microsoft-based applications. Throughout my career, I have gained experience in various industries and specialized in Power Platform, Power Apps, Power Automate, and enterprise process automation. In this blog, I share my experiences in software development, automation, and Microsoft technologies.","sameAs":["http:\/\/mryed.com","https:\/\/www.linkedin.com\/in\/yunus-emre-demirel\/"]}]}},"_links":{"self":[{"href":"https:\/\/mryed.com\/en\/wp-json\/wp\/v2\/posts\/435","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/mryed.com\/en\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/mryed.com\/en\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/mryed.com\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/mryed.com\/en\/wp-json\/wp\/v2\/comments?post=435"}],"version-history":[{"count":3,"href":"https:\/\/mryed.com\/en\/wp-json\/wp\/v2\/posts\/435\/revisions"}],"predecessor-version":[{"id":566,"href":"https:\/\/mryed.com\/en\/wp-json\/wp\/v2\/posts\/435\/revisions\/566"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/mryed.com\/en\/wp-json\/wp\/v2\/media\/436"}],"wp:attachment":[{"href":"https:\/\/mryed.com\/en\/wp-json\/wp\/v2\/media?parent=435"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/mryed.com\/en\/wp-json\/wp\/v2\/categories?post=435"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/mryed.com\/en\/wp-json\/wp\/v2\/tags?post=435"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}