React-Native Love Meter教程

Herkese tekrardan merhabalar，

Kısasüredeikinciyazımıpaylaşıyorumve bu beniçokmutlu ediyor。 伯尔·苏尔（Birsüreyazılarıma）和其他人在一起，这是本机反应本机ile ilgili yeniöğreticiyazılarımadevamedeceğim。

Buyazımda大小çokbasit birşekildesadece tek bir sayfadanoluşacakolanaşk米uygulamasınınsadece前端tarafınınnasılyapılacağınıgöstereceğim。 Oldukçabasit olacak。 Hattayazıyıdahakısaveanlaşılırtutmakiçinbazınpm paketlerinin deyardımınıalacağım。

• 学习是考试策略中的最后一项。 没有标记可以猜测原因。
• 成为学习机器！ 我如何处理该主题。 第1部分。
• Додатки，зякимивививчитеіноземнімови，першніжяскажу«квідич»
• 与DK Yoo交往
• Andrea Feczko：真正的旅行书呆子

反应堆本地反应堆本地反应堆öncekiyazımdankurulumunnasılyapılacağınıöğrenebilirsiniz。

React-Native Kurulumu（Mac）
React-Nativenasılkurulur？ medium.com

默认情况下，默认为React-Native projesinikuralım。 Bununiçinterminal’e

  react-native初始化 

yazıyoruz。 Projemiz kurulurken ben de size hangi npm paketlerinikullanacağımızısöyleyeyim。

React-Native-Elements：https://github.com/react-native-training/react-native-elements

React-Native-Progress-Bar-Animated：https://github.com/rafaelmotta/react-native-progress-bar-animated

React-Native-TextInput-Effects：https://github.com/halilb/react-native-textinput-effects

Slugify：https://github.com/simov/slugify

Hepsini tek tek tek kurmak yerineaşağıyayazdığımkodları码头ekranınayazarsanızkurulumlargerçekleşecektir。

  $ cd  

  $ npm i react-native-elements-保存&& npm i-保存react-native-vector-icons && npm install-保存react-native-progress-bar-animated && npm install react-native-textinput-effects- -save && npm我sl --save 

  $ react-native链接 

Artıkkurulumlargerçekleştive kodlamayageçebiliriz。

否：不提供帮助，请联系我们。

爱情计算器API文档
爱情计算器API文档。 输入您的名字以及您的伴侣/恋人/恋人的名字，以查找与爱的兼容性…… market.mashape.com

Dediğimgibi bu tek ekrandanoluşanbir uygulama olacak oyüzdenproje dizininde bulunan App.jskısmındatümkodlamamızıyapacağız。

İlkişimizbukurduğumuzpaketleri进口etmek olacak。

App.js JavaScriptdosyamızıbu hale getiriyoruz。 Simulatordeçalıştırdığımızzamanortasında’Love Meter App’yazan bir ekran ilekarşılaşmanızgerekiyor。

有人说说我的名字叫koyacağımızıkonuşalım。 Bize bu uygulama图标2 tane TextInput，2 tane Button ve sorgumuzda bizedönensonuçlarıgöstereceğimiz文本componentleri gerekiyor。

TextInputlarıdahagüzelbirgörünümolsun diyehazırbir paket olan React-Native-TextInput-Effects’ikullanacağım。

Reactlar-Native-Elements UI paketinikullanacağım的Buttonlar图标。

Kodlamatarafındabizebazıstate’ler gerekecek。 国家mantığınıkısacaaçıklamamgerekirse。 Bunlarıdeğişkenolarakgörebilirsinizfakat kodtarafındaşöylebirgüzelliğesebep oluyor。 Herhangi bir statedeğişikliğiolduğuzaman bizim Render（）fonksiyonumuz她的seferinde tekrardançalışıyorveekranımızaistediğimizgörselözelliğikazandırabiliyoruz。

Şimdibize gereken state’lerimizi belirleyelim。 出售其他商品2 tanedeğişkenvar。 Bunlar sizin vekarşınızdakikişininadıolacak。 Bu ikisini state’tekodlayalım。 Bize api’danbaşkaveriler dedönüyor。 Bunlaryüzdelikolarak sizinpuanınızve gelen puanagöresonucunuz。 Bunlarıda state’eyazmamızgerekiyor。

 状态= { 
  fname：“， 
  sname：“， 
 计算：0， 
 结果：“， 
 加载：false， 
 完成：错误， 
 错误：空 
  } 

State’dekidiğeryazdığımdeğişkenlerdenilerdebahsedeceğim。

Şimdi州yapımızhazırolduğunagöreekrandakigörünümleregeçebiliriz。

渲染fonksiyonumuzayazdığımızbu kodu birazaçıklayayımşimdi。

componenti bize bir背景resmisağlıyor。 Bunu internetten随机bir resim阿拉拉克yapıyoruz。

 来源= {{uri：'https：//picsum.photos/500/800'}} 

照片从头到尾500’e 800boyutlarındabir random resimalıpcihazımızdagörüntüleyeceğiz。

TextInput’larınpm paketindenkullandığımısöylemiştim。 Bu paketteki Makiko componentinikullanıyorum。 İstersenizsiz dahafarklıtarzda textInput da kullanabilirsiniz。 Yukarda linkiniverdiğimgithubsayfasınabakmanızyeterli。 Bununözellikleriniaçıklamamgerekirse;

onSubmitEditing prop’u bizyazmamızgerekenşeyiyazıpklavyedeki返回tuşunabastıktan索拉olacaklarıbelirtiyor。 Ben burada bir sonraki textInputa引用了vererek return’abastıktansonra o textInput’uaktifleştirmesigerektiğinisöyledim。

值prop’u da bizim TextInput’umuzundeğişkeninibelirtiyor。 Bunu da state’debelirttiğimizfname oluyor。

onChangeText属性由textInput’ayazdığımız她的harfi state’detanımladığımızfnamedeğişkeninegönderiyorveyazımızbittikten sonra state’deki fnamedeğişkenimiztextInputta neyazdıysak命名。

Diğerpropize bize npm paketiningetirdiğiözellikler。 Bunlarıgithubsayfasındanaraştırarakistediğinizgibideğiştiripdüzenleyebilirsiniz。

Biraz da Button componentimizinproplarınabakalım。 Bu componentte birşeydenbahsedicem sadece，diproper yine React-Native-Elements githubsayfasınagidipözelliklerinebakabilirsiniz。

onPress prop’u biz butonabastıktansonra neolacağınıbelirtiyor。 本burada箭头功能dediğimizbiryapıkullandım。 Basit bir kontrole soktum。 您可以通过apimes a ve is gitmesini ve daha az maliyetolmasınısağlıyor。 Buradayaptığımkontrol; 状态声明名称，名字名称ikisinden birisiboşise api’a istekgöndermiyorum，ekrana bir bildirimçıkartıyorumve’Lütfengerekli yerleri doldurun’diyorum。 州立大学的宗教与宗教事务处处长。

本按钮componentinebasıldıktansonra getData（）diy bir fonksiyonçağırıyorumşimdibu fonksiyonumuzuyazalım。

ŞimdisıragetData返回数据。 Önceliklebenimoluşturduğumheroku projesinin linkini bir sabit olaraktanımlıyoruz。

不是：const sabit demek yani daha sonradandeğiştirilemez。 让isedeğişken。

Bu链接Slugify diye bir paketikullandım。 KullandığımızApiTürkçekarakterleritanımıyorpaket bizeTürkçekarakterlerin Ingilizdekarşılığınıveriyor veeğerboşlukkullanmışsakbuboşluklarısiliyor。 雅妮·达哈（Yani daha）

İsteğiyaparken，veri gelene kadar ekranda bir ActivityIndi​​catorçalıştırmakistedim。 Oyüzdenstatteyazdığımızloading’i hemen istek yapmadan true’yaçeviriyoruz。

Ardındansabit olaraktanımladığımızlinkimizi提取ediyoruz yani benim elimdeböylebir link var sen bu linki al linktendönenveriyi cihaza indir diyoruz bir nevi。 Sonrasında.then（）diyip bu linkin播放器中的声音。jsonformatınaçeviriyoruzki daha kolayişleyebilelim。 Ardındantekrar .then（）ile格式的json格式文件，格式为nasra yapmak istediklerimiziyazıyoruz。 Burada state’lerideğiştiriyoruzki tekrardan渲染fonksiyonumuzçalışsınve ekranaistediğimizveriler gelsin。 .catch（）将关闭链接，然后将其删除。 Bunu da stattebelirttiğimiz错误değişkenine设置ediyoruz。

不是的：Bize gelenyüzdelikveri stringformatındadönüyor。 Bizim，veriye Int tipindeihtiyacımızvar。 您可以使用paryInt（）来解析Int tipi olarakdeğiştiriyoruz。

Artıkapi’a verilerigönderdikvedönenverileriçektikfakat ekranda bu verilergözükmüyor。 Bununiçintekrardanbirkaçfonksiyon eklememiz gerekiyor kodumuza。

Bufonksiyonlarımızbize api’aisteğiyaptığımızand a veisteğiyapıpişlemtamamlandıktansonra neolmasınıistiyoruzonlarıgösteriyor。

Kısacaaçıklamayaçalışayım。

getDataLoading（）正在加载state’imizebağlıolarakçalışıyor。 Eğerbu state false durumda ise bize return olarak nulldönecek。 状态为trueolduğuanda iseekranınortasındabir ActivityIndi​​catorçıkacak。 正在加载state’imiz否olunca tekrardan nulldönecek。

getDataComplete（）完成完整状态的状态。 Bu state false ise nulldönecektrueolduğuanda da ekrandayazılarçıkacak。

Burada ProgressBar动画paketinikullanıyorum。 Yukarda github linkini verdimözelliklerineoradan bakabilirsiniz oyüzden风格的özelliklerinigeçiyorum。 Bizimiçin和önemli地区的bar’ındolması。 国家统计局可以计算出dir birdeğişkentanımlamıştık。 值kısmındabudeğişkenikullanıyoruz。

Bufonksiyonlarıeklememizerağmenhala ekranda birdeğişiklikgöremeyeceksiniz。 Bunun sebebi bufonksiyonlarımızırender’daçağırmadık。 Bununiçinşöylebirtanımlamakullanacağız;

  render（）{ 
 返回（ 
   

  。 
  。 
  。 
  。 
  。 
  {this.getDataLoading（）} 
  {this.getDataComplete（） 
   
  ） 
  } 

getDataLoading和getDataComplete渲染Içerisindeiyikonumlandırmamızgerekiyor。 Yoksaistediğimizyerdeistediğimizgibi birgörünümsağlayamayız。 Ben tam olarak渲染fonksiyonunda视图componentinin enaltınakoydum。

ArtıktextInput’larayazıpve计算buttonunabastığımızzaman ekrandaistediğimizyazılarveyüzdelikolarak score’umuzgözükecektir。

Peki buinputlarınasılsıfırlarız？

Bununiçintek tek elle输入larayazdıklarımızısilip sonra tekraryazıp计算buttonuna basmak gibi bir amelelikyapmamızagerek yok。

Yani bir de Delete buttonu eklememiz gerekiyor。 Bu buttonbütünstate’lerimizisıfırlayacak。

Bu fonksiyonda da yine bir state’ebağlıçalışıyor。

埃格尔（Eğer）整理state’imiz false durumunda ise buttonumuz ekrandagörünmeyecektir。

完整的状态由真实的yapıyoruz到ekranda bu buttonumuzungörünmesinisağlıyoruz。

Bu buttonumuzungöreviise sadece bizim state’lerimizi默认为盐酸盐getirmek。 亚妮ha盐。

Bu buttonumuzu da render’daçağırmamızgerekiyor yoksa ekrandagözükmeyecektir。 Ayağıdatümuygulamanınkodlarınıpaylaşıyorumve orada tam olarak neredetanımladığımızıgörebilirsiniz。

Kodlarıkullanıpistediğinizgibideğişiklikyapıpkendiniz deneyebilirsiniz。

Umarımbu bilgilerfaydalıolmuştur。

Benim GitHub的sayfamaulaşmak图标：https://github.com/ArdaSenturk

Sorularınızvarsa yorumlara yazabilirsiniz。 zh-cnsüredecevaplamayaçalışacağım。

肯尼迪（Kindinize）iyibakıniyi kodlamalar。