ເນື້ອຫາ
ການພັດທະນາແອັບ Native ມືຖືແບບພື້ນເມືອງແມ່ນສະພາບແວດລ້ອມທີ່ຫຍຸ້ງຍາກ. ມີລະບົບປະຕິບັດການທີ່ແຕກຕ່າງກັນ, ມີຜູ້ຜະລິດໂທລະສັບມືຖືທີ່ຫຼາກຫຼາຍແລະມີຄວາມລະອຽດກວ້າງໃນ ໜ້າ ຈໍເພື່ອສ້າງ. ໂຊກດີທີ່ Facebook ໄດ້ປ່ອຍ React Native - ກອບທີ່ຖືກອອກແບບມາເພື່ອຂະຫຍາຍວິທີການ React ໃນການພັດທະນາໂປແກຼມມືຖື.
ໃນບົດແນະ ນຳ ນີ້, ພວກເຮົາ ກຳ ລັງຈະສ້າງແອັບ weather ສະພາບອາກາດໃນເວລາຈິງໂດຍໃຊ້ OpenWeatherMap's API ຟຣີ. ຂ້ອຍຈະກວມເອົາການເຮັດວຽກກັບສ່ວນປະກອບຂອງ React Native, ຮູບພາບແລະຮູບແບບແລະການໂຫຼດແລະແຍກຂໍ້ມູນ JSON.
ເລີ່ມຕົ້ນ
ກ່ອນອື່ນ ໝົດ, ດາວໂຫລດໄຟລ໌ທີ່ມາຈາກ GitHub. ທ່ານຈະພົບກັບໂຟນເດີ 'source-imagery' ທີ່ປະກອບດ້ວຍຮູບພາບການສອນ, ແຟ້ມ 'ບົດຄວາມ - ຂັ້ນຕອນ' ເຊິ່ງປະກອບດ້ວຍລະຫັດແຫຼ່ງຂໍ້ມູນ ສຳ ລັບແຕ່ລະບາດກ້າວ (ບວກກັບ ຄຳ ເຫັນ), ແລະ 'ໂຟນ ສຳ ເລັດຮູບຂອງໂຄງການ' ເຊິ່ງປະກອບດ້ວຍໂຄງການແຫຼ່ງສຸດທ້າຍ.
ທ່ານ ຈຳ ເປັນຕ້ອງມີ Xcode ສຳ ລັບລວບລວມແອັບ iOS iOS (ມີຈາກ App Store) ແລະຜູ້ຈັດການຊຸດ Homebrew OSX. ເມື່ອທ່ານໄດ້ຕິດຕັ້ງ Homebrew ແລ້ວ, ທ່ານສາມາດເປີດ ໜ້າ ຕ່າງ Terminal ແລະ ດຳ ເນີນການ ຄຳ ສັ່ງຕໍ່ໄປນີ້ (ຖ້າທ່ານມີປັນຫາ, ມີ ຄຳ ແນະ ນຳ ຢູ່ນີ້):
- brew install node ເພື່ອຕິດຕັ້ງ Node.js
- brew install watchman ເພື່ອຕິດຕັ້ງ Watchman, ບໍລິການເບິ່ງເອກະສານ
- brew install flow, ຕົວກວດກາປະເພດຂໍ້ມູນແບບຄົງທີ່
- npm install -g react-native-cli ເພື່ອຕິດຕັ້ງ React Native
ທ່ານສາມາດສ້າງໂຄງການໄດ້ໂດຍການພິມແບບໂຕ້ຕອບທີ່ມີປະຕິກິລິຍາລິເລີ່ມ. ເຮັດບັນທຶກຂອງໂຟນເດີຂອງໂຄງການແລະເປີດມັນເພື່ອເບິ່ງໂຄງສ້າງຂອງໂຟນເດີເລີ່ມຕົ້ນຂອງ React Native. ໄດເລກະທໍລີ iOS ແມ່ນບ່ອນທີ່ເອກະສານໂຄງການຂອງເວທີ iOS ຕັ້ງຢູ່. ແຟ້ມທີ່ພວກເຮົາສົນໃຈໃນຈຸດນີ້ແມ່ນ 'index.ios.js'. ເປີດສິ່ງນີ້ໄວ້ໃນບັນນາທິການທີ່ທ່ານເລືອກ.
ເບິ່ງທີ່ໂຄງສ້າງຂອງໂຟນເດີ:
- ສາຍ 8-11 ປະກອບມີ React ທີ່ຕ້ອງການ ສຳ ລັບສ່ວນປະກອບຂອງແອັບນີ້
- ສາຍ 15-32 ປະກາດວ່າຊັ້ນຮຽນເລີ່ມຕົ້ນ ສຳ ລັບ weatherapp ແລະວິທີການ render ຂອງມັນ
- ເສັ້ນ 34-51 ກຳ ນົດຮູບແບບທີ່ໃຊ້ໃນແອັບ
- ແຖວ 53 ແມ່ນຊື່ສົ່ງອອກຂອງອົງປະກອບນີ້
ສິ່ງ ທຳ ອິດທີ່ພວກເຮົາຕ້ອງເຮັດຄືການກະກຽມຜ້າຫົມເປົ່າ. ປ່ຽນວິທີການສະແດງໃຫ້ເປັນ:
render: function () {ກັບຄືນ (ເບິ່ງແບບ = {[styles.container, {backgroundColor: this.state.backgroundColor}]}> / ເບິ່ງ>); }
ນີ້ສ້າງມຸມມອງຫວ່າງໂດຍໃຊ້ຮູບແບບຕ່າງໆ - ຮູບແບບພາຊະນະແລະຕົວແປຂອງລັດທີ່ເອີ້ນວ່າ backgroundColor. ພວກເຮົາຈະປ່ຽນຕົວປ່ຽນ backgroundColor ໂດຍອີງໃສ່ອຸນຫະພູມປັດຈຸບັນເມື່ອພວກເຮົາສອບຖາມ API ສະພາບອາກາດ ສຳ ລັບຂໍ້ມູນ. ພວກເຮົາຍັງສາມາດ ກຳ ນົດຮູບແບບຂອງພາຊະນະເພື່ອ ນຳ ໃຊ້ flex: 1 ສຳ ລັບຈຸດສູນກາງ.
ພາຊະນະ: {flex: 1},
ຕອນນີ້ພວກເຮົາ ກຳ ລັງຈະ ນຳ ໃຊ້ວິທີການ GetInitialState ຂອງ React. ສິ່ງນີ້ຈະຖືກຮຽກຮ້ອງໂດຍອັດຕະໂນມັດໃນສ່ວນປະກອບໃດໆເມື່ອແອັບ when ໃຊ້. ພວກເຮົາຈະໃຊ້ມັນເພື່ອປະກາດຕົວປ່ຽນແປງຂອງລັດທີ່ຖືກ ນຳ ໃຊ້ພາຍຫຼັງ. ເພີ່ມວິທີການຂ້າງເທິງນີ້ໃນວິທີການສະແດງໃນຫ້ອງຮຽນ WeatherApp:
getInitialState: function () {return {weatherData: null, backgroundColor: "#FFFFFF"}; },
ດຽວນີ້ແມ່ນເວລາທີ່ດີເລີດທີ່ຈະໂດດເຂົ້າໄປໃນ Xcode ແລະກົດຫຼີ້ນໃນເຄື່ອງ ຈຳ ລອງເພື່ອເບິ່ງ ຄຳ ຮ້ອງສະ ໝັກ ຂອງທ່ານ. ໜຶ່ງ ໃນຄຸນລັກສະນະທີ່ດີເລີດຂອງ React Native ແມ່ນຄວາມໄວສົມທົບຂອງມັນ. ແກ້ໄຂ #FFFFFF ໃຫ້ເປັນສີອື່ນແລະກົດປຸ່ມ 'cmd + R' ເພື່ອເບິ່ງການໂຫຼດ ໃໝ່ ເກືອບທັນທີ - ສວຍງາມ!
ປະກາດຄົງທີ່
ໃຫ້ປະກາດ ຈຳ ນວນທີ່ໃຊ້ ສຳ ລັບສີພື້ນຫລັງແລະອີກອັນ ໜຶ່ງ ສຳ ລັບ URL ຂອງ openweathermap.org ທີ່ໃຫ້ຂໍ້ມູນດິນຟ້າອາກາດ. ຕື່ມຂໍ້ມູນຕໍ່ໄປນີ້ຂ້າງລຸ່ມນີ້ React ຮຽກຮ້ອງ:
var BG_HOT = "# fb9f4d"; var BG_WARM = "# fbd84d"; var BG_COLD = "# 00abe6"; var REQUEST_URL = "http://api.openweathermap.org/data/2.5/weather?units=metric&";
ພວກເຮົາຍັງຕ້ອງການໃຊ້ອີກວິທີ ໜຶ່ງ ຂອງ React's built-in, componentDidMount. ສິ່ງນີ້ຈະຖືກເອີ້ນໂດຍອັດຕະໂນມັດເມື່ອສ່ວນປະກອບໃດ ໜຶ່ງ ປະສົບຜົນ ສຳ ເລັດ. ພວກເຮົາຈະໃຊ້ມັນເພື່ອສອບຖາມຜູ້ ນຳ ທາງເພື່ອໃຫ້ໄດ້ສະຖານທີ່ທາງພູມສາດໃນປະຈຸບັນ. ຕື່ມວິທີຕໍ່ໄປນີ້ຫຼັງຈາກວິທີການ GetInitialState ແລະກ່ອນວິທີການ render:
componentDidMount: function () {navigator.geolocation.getCurrentPosition (ທີ່ຕັ້ງ => {var formattedURL = REQUEST_URL + "lat =" + location.coords.latitude + "& lon =" + location.coords.longitude; console.log (formattedURL); }, ຂໍ້ຜິດພາດ => {console.log (ຂໍ້ຜິດພາດ;}); },
ເມື່ອຖືກລວບລວມ, ເຄື່ອງ ຈຳ ລອງຈະຂໍໃຫ້ທ່ານອະນຸຍາດໃຫ້ແອັບພລິເຄຊັນເຂົ້າເຖິງສະຖານທີ່ຂອງທ່ານ. ທ່ານຄວນຈະເຫັນ URL ທີ່ເຮັດ ສຳ ເລັດແລ້ວ (ຮູບແບບຂອງຕົວປ່ຽນແປງ) ທີ່ສະແດງຢູ່ໃນປ່ອງຢ້ຽມຂອງຜົນຜະລິດ Xcode. React Native ໃຊ້ console.log () ເພື່ອສະແດງເນື້ອຫາແບບນີ້ - ມີປະໂຫຍດຫຼາຍ ສຳ ລັບການແກ້ໄຂ.
ຂັ້ນຕອນຕໍ່ໄປແມ່ນການສົ່ງເສັ້ນຂະ ໜານ ແລະເສັ້ນແວງຂອງພວກເຮົາໄປທີ່ openweathermap.org API. ຕື່ມລະຫັດດັ່ງຕໍ່ໄປນີ້ຂ້າງລຸ່ມນີ້ componentDidMount ແລະຂ້າງເທິງ render:
fetchData: function (url) {fetch (url). ຕໍ່ ((ການຕອບຮັບ) => response.json ()). ຕໍ່ ((responseData) => {var bg; var temp = parseInt (responseData.main.temp)) ຖ້າ (temp 14) {bg = BG_COLD;} ອີກຢ່າງ ໜຶ່ງ ຖ້າ (temp> = 14 && temp 25) {bg = BG_WARM;} ອື່ນຖ້າ (temp> = 25) {bg = BG_HOT;} this.setState ({weatherData: responseData, backgroundColor: bg});}) .done (); },
ລະຫັດຂ້າງເທິງເຊື່ອມຕໍ່ກັບ API ເພື່ອໃຫ້ໄດ້ຮັບການຕອບຮັບ JSON. ຫຼັງຈາກນັ້ນມັນຈະແຍກອຸນຫະພູມຂອງສະຖານທີ່ແລະປັບປຸງຕົວປ່ຽນແປງຂອງຕົວປ່ຽນແປງພື້ນຫລັງຂອງລັດ. ເມື່ອແອັບ re ປ່ອຍຕໍ່ໄປ, ມັນໃຊ້ສີ ໃໝ່ ນີ້.
ສຸດທ້າຍ, ທ່ານ ຈຳ ເປັນຕ້ອງເພີ່ມສາຍທີ່ຈະເອີ້ນວິທີການ fetchData ໃໝ່ ນີ້ຈາກວິທີການ componentDidMount. ລະຫັດຕໍ່ໄປນີ້ແມ່ນຢູ່ຂ້າງລຸ່ມຂອງ console.log ທີ່ພວກເຮົາເຄີຍໃຊ້ເພື່ອສະແດງ URL:
this.fetchData (ມີການຈັດຮູບແບບ);
ຍ້ອນວ່າມັນອາດຈະມີຄວາມຊັກຊ້າໃນການໂຫລດຂໍ້ມູນ API, ພວກເຮົາຕ້ອງສະແດງມຸມມອງ ໃໝ່ ທີ່ຈະເຮັດ ໜ້າ ທີ່ຖືຂໍ້ຄວາມ. ວິທີການຕໍ່ໄປນີ້ຈະກັບມາເບິ່ງມຸມມອງ ໃໝ່ ດ້ວຍການໂຫລດຂໍ້ຄວາມ:
renderLoadingView: function () {ກັບຄືນ (ເບິ່ງແບບ = {styles.loading}> ແບບຕົວ ໜັງ ສື = {styles.loadingText}> ກຳ ລັງໂຫລດສະພາບອາກາດ / ຂໍ້ຄວາມ> / ເບິ່ງ>); },
ໃນຂະນະທີ່ແອັບ re ອອກ ຈຳ ໜ່າຍ, ມັນ ຈຳ ເປັນຕ້ອງກວດສອບສະພາບຂອງມັນເພື່ອເບິ່ງວ່າຂໍ້ມູນດິນຟ້າອາກາດມີຢູ່ຫລືບໍ່:
ຖ້າ (! this.state.weatherData) {ກັບຄືນ this.renderLoadingView (); }
ຕອນນີ້, ເພີ່ມການໂຫຼດແລະ loadingText ແບບທີ່ ກຳ ນົດເອງເຂົ້າໃນຮູບແບບຕ່າງໆແລະສ່ວນນີ້ ສຳ ເລັດແລ້ວ.
ເມື່ອທ່ານທົດສອບແອັບ,, ທ່ານຄວນເບິ່ງຂໍ້ຄວາມໂຫຼດສັ້ນໆແລະຈາກນັ້ນສີພື້ນຫລັງທີ່ສະທ້ອນເຖິງອຸນຫະພູມ.
ຂໍ້ມູນສະພາບອາກາດ
ດຽວນີ້ເຖິງເວລາແລ້ວທີ່ຈະສ້າງສ່ວນປະກອບທີ່ສະແດງຂໍ້ມູນດິນຟ້າອາກາດ. ສ້າງໂຟນເດີ ໃໝ່ ທີ່ເອີ້ນວ່າ 'App' ໃນຮາກໂຄງການຂອງທ່ານ. ໃນນີ້, ສ້າງໂຟນເດີອື່ນທີ່ເອີ້ນວ່າ 'Views', ເຊິ່ງພວກເຮົາຈະຄັດລອກແບບ WeatherView ຈາກຂັ້ນຕອນຂອງບົດຄວາມ.
ທ່ານຈະສັງເກດເຫັນວ່າມັນເກືອບຄືກັນກັບຊັ້ນຕົ້ນຕໍ. ຍ້ອນວ່າມັນມີຕົວ ໜັງ ສືສະຖານທີ່ຕັ້ງໄວ້ແລ້ວ, ພວກເຮົາຈະກັບໄປຫາຫ້ອງຮຽນ index.ios.js ຫຼັກຂອງພວກເຮົາແລະເພີ່ມ ຄຳ ປະກາດ ສຳ ລັບສ່ວນປະກອບ.
var WeatherView = ຕ້ອງການ ('./ App / Views / WeatherView.js');
ຫຼັງຈາກນັ້ນໃນວິທີການ render, ພວກເຮົາພຽງແຕ່ເພີ່ມ:
WeatherView />
ເມື່ອເລີ່ມຕົ້ນການ ຈຳ ລອງດ້ວຍ 'cmd + R', ທ່ານຄວນເຫັນ 'TEST' ສະແດງຢູ່ໃຈກາງຂອງ ໜ້າ ຈໍ. ທ່ານໄດ້ໂຫລດສ່ວນປະກອບ ໃໝ່ ຂອງທ່ານແລ້ວ.
ເພີ່ມໄອຄອນ
ຕອນນີ້ພວກເຮົາ ກຳ ລັງຈະເພີ່ມໄອຄອນເຂົ້າໃນໂຄງການ Xcode ຂອງພວກເຮົາ ສຳ ລັບແຕ່ລະປະເພດດິນຟ້າອາກາດ (ລະຫັດຢູ່ທີ່ນີ້). ໃນ Xcode, ເປີດ 'Images.xcassets' ແລະລາກຮູບທັງ ໝົດ ຈາກໂຟນເດີ 'weather_icons'.
ເພື່ອຊ່ວຍປະຢັດການພິມຫຼາຍ, ເຂົ້າໄປໃນ GitHub repo, ແລະທົດແທນ 'WeatherView.js' ໃນປະຈຸບັນຂອງທ່ານດ້ວຍລະຫັດໃນຂັ້ນຕອນທີ 7. ລະຫັດ ໃໝ່ ທີ່ທ່ານສາມາດເຫັນແມ່ນແຖວ, ຖືກດັດສະນີໂດຍລະຫັດໄອຄອນສະພາບອາກາດທີ່ກັບມາຈາກ API ກ່ອນທີ່ພວກເຮົາຈະສາມາດ ນຳ ໃຊ້ໄດ້, ພວກເຮົາ ຈຳ ເປັນຕ້ອງສົ່ງຂໍ້ມູນດິນຟ້າອາກາດເຂົ້າໃນສ່ວນປະກອບນີ້.
ເພື່ອບັນລຸເປົ້າ ໝາຍ ດັ່ງກ່າວ, ພວກເຮົາສາມາດ ນຳ ໃຊ້ຕົວປ່ຽນແປງຂອງລັດອີກຄັ້ງ, ແລະ - ຂໍຂອບໃຈກັບ propTypes - ພວກເຮົາສາມາດປະກາດປະເພດຂໍ້ມູນທີ່ພວກເຮົາຄາດຫວັງໄວ້. ຕື່ມສິ່ງຕໍ່ໄປນີ້ໂດຍກົງພາຍໃຕ້ການສ້າງຫ້ອງຮຽນແບບ WeatherView:
propTypes: {ສະພາບອາກາດ: React.PropTypes.string, ອຸນຫະພູມ: React.PropTypes.int, ເມືອງ: React.PropTypes.string, ປະເທດ: React.PropTypes.string},
ຂໍໃຫ້ດັດແກ້ເຄື່ອງ ໝາຍ ທີ່ສົ່ງກັບຄືນຈາກ WeatherView. ລະຫັດຕໍ່ໄປນີ້ເພີ່ມຮູບພາບສະພາບອາກາດ, ບວກກັບຂໍ້ຄວາມ ສຳ ລັບອຸນຫະພູມແລະເມືອງແລະປະເທດ. ສັງເກດວິທີທີ່ແທັກອ້າງເຖິງຕົວແປຂອງໂປແກມແລະ ສຳ ລັບຮູບພາບ, ຕົວແປ ສຳ ລັບຄີຂອງອາເລ, ດັ່ງນັ້ນຮູບທີ່ຖືກຕ້ອງສະແດງໃຫ້ເຫັນ.
ຮູບແບບການເບິ່ງ = {styles.centreContainer}> ແຫຼ່ງຮູບພາບ = {weatherIconArray [this.props.weather]} style = {styles.weatherIcon} /> ແບບຂໍ້ຄວາມ = {styles.weatherText}> {this.props.temperature} ° / Text > ແບບຕົວ ໜັງ ສື = {styles.weatherTextLight}> {this.props.city}, / ຕົວອັກສອນ> ແບບຕົວ ໜັງ ສື = {styles.weatherTextLight}> {this.props.country} / ຂໍ້ຄວາມ> / ເບິ່ງ>
ຮູບແບບຕ່າງໆທີ່ພວກເຮົາຕ້ອງການເພີ່ມ ສຳ ລັບສິ່ງນີ້ແມ່ນ:
weatherIcon: {width: 132, ຄວາມສູງ: 132,}, weatherText: {fontSize: 62, fontWeight: "bold", ສີ: "#FFFFFF", textAlign: "ສູນກາງ"}, weatherTextLight: {fontSize: 32, fontWeight: " 100 ", ສີ:" #FFFFFF ", textAlign:" ສູນກາງ "}
ໃນທີ່ນີ້ພວກເຮົາໄດ້ລະບຸຄວາມກວ້າງແລະຄວາມສູງຂອງໄອຄອນສະພາບອາກາດ. ຮູບແບບ weatherText ສ້າງຕົວອັກສອນໃຫຍ່, ໜັກ ສຳ ລັບອຸນຫະພູມ, ແລະ weatherTextLight ສ້າງຕົວອັກສອນອ່ອນ ສຳ ລັບເຂດສະຖານທີ່.
ການເພີ່ມຂໍ້ມູນ
ສິ່ງທີ່ຍັງເຫຼືອແມ່ນການເພີ່ມຂໍ້ມູນບາງຢ່າງ. ມຸ່ງ ໜ້າ ໄປທີ່ 'index.ios.js' ຂອງທ່ານແລະປັບປຸງວິທີ render ກັບ:
var city = this.state.weatherData.name.toUpperCase (); var ປະເທດ = this.state.weatherData.sys.country.toUpperCase (); var temp = parseInt (this.state.weatherData.main.temp) .toFixed (0); var weather = this.state.weatherData.weather [0] .icon.toString (); ກັບມາ (ເບິ່ງແບບ = {[styles.container, {backgroundColor: this.state.backgroundColor}]}> ສະພາບອາກາດ WeatherView = {ສະພາບອາກາດ} ອຸນຫະພູມ = {temp} ເມືອງ = {ເມືອງ} ປະເທດ = {ປະເທດ} /> / ເບິ່ງ>) ;
ສິ່ງນີ້ແບ່ງປັນການຕອບສະ ໜອງ ຂອງ JSON ແລະ ນຳ ເອົາຂໍ້ມູນກ່ຽວກັບເມືອງ, ປະເທດແລະອຸນຫະພູມ, ແລະສົ່ງມັນໄປຫາສ່ວນປະກອບ ດຽວນີ້ຖ້າທ່ານ cmd + R 'ເລີ່ມຕົ້ນການ ຈຳ ລອງ ໃໝ່, ທ່ານຄວນຈະເຫັນແອັບ final ສຸດທ້າຍຂອງທ່ານ.
ນີ້ແມ່ນຫຼັກໃນການສ້າງໂປແກຼມ React Native. ມັນງ່າຍດາຍແທ້ໆ! ຂ້ອຍຫວັງວ່າເຈົ້າຈະມ່ວນກັບການເຮັດວຽກກັບມັນ.
ຄຳ ເວົ້າ: Anton Mills
Anton Mills ແມ່ນນັກວິຊາການທີ່ສ້າງສັນເຊິ່ງເປັນຜູ້ຊ່ຽວຊານດ້ານການພັດທະນາເກມ. ບົດຂຽນນີ້ຖືກຈັດພີມມາໃນສະບັບທີ 270 ຂອງວາລະສານສຸດທິ.
ມັກນີ້ບໍ? ອ່ານເຫຼົ່ານີ້!
- ແບບຢ່າງໄວວາໃນການອອກແບບແອັບ mobile ມືຖື
- ວິທີການສ້າງແອັບ:: ລອງການສອນທີ່ດີເຫຼົ່ານີ້
- ມີໂປແກຼມອອກແບບກາຟິກທີ່ບໍ່ເສຍຄ່າໃຫ້ກັບທ່ານໃນຕອນນີ້!
