789 งานเร่งกับ React Native (002)

หลังจากรู้ข้อมูลเบื้อต้นกันพอสำควรแล้ว ได้เวลาCode RN(React Native) แล้วล่ะ สำหรับ 002 นี้เราจะเริ่มสร้างไฟล์หน้ากลางเพื่อให้เวลา iOSหรือAndroid ทำงานจะมาทำงานที่หน้ากลางเพื่อลดความซ้ำซ้อนและประหยัดเวลา..

เมื่อเริ่มต้น เราจะพบว่าการทำงานเมื่อเปิด App ที่เราสร้างจะเริ่มทำงานที่ไฟล์ index.android.js สำหรับ Android หรือ index.ios.js สำหรับ iOS ดังรูปด้านล่าง

ทีนี้ถ้าต้องการเปลี่ยนการทำงานต่างๆ ก็จำเป็นต้องไปแก้ในแต่ละไฟล์เพื่อให้แสดงผลตรงกัน จะดีกว่าไหมถ้าทำให้ทั้ง iOS และ Android เรียกไฟล์เดียวกันและเวลามีการแก้ไขก็แก้ที่จุดเดียว ดังภาพด้านล่าง

มาลองทำกันเลย

เริ่มต้น เปิดไฟล์ index ก่อนจะพบว่า มีcode ดังนี้

ทีนี้ให้ทำการสร้างโฟลเดอร์ ตามนี้

app>components

หลังจากนั้นสร้างไฟล์ ชื่อ MainApp.js ภายในโฟลเดอร์ components จะได้เป็น

app>components>MainApp.js

คัดลอกข้อมูลที่ไฟล์ index.android.js ไปใส่ในไฟล์ MainApp.js โดยคัดลอกทั้งหมดยกเว้น บรรทัดด้านล่าง

AppRegistry.registerComponent(‘AwesomeProject’, () => AwesomeProject);

ทีนี้ในหน้า MainApp.js ก็จะมีข้อมูลที่มาจากหน้า index.android.js แล้ว

ดังนั้นเราจะเอาหน้า index.android.js และหน้า index.ios.js ชี้มาที่ไฟล์ MainApp.js เพื่อที่จะแก้ไขจากไฟล์นี้ที่เดียว

เปิดไฟล์ index.android.js แล้วลบข้อมูล ส่วนของclass และส่วน StyleSheet ทิ้งจะเลือกเพียง

import React, { Component } from ‘react’;
import {
 AppRegistry,
 StyleSheet,
 Text,
 View
} from ‘react-native’;
AppRegistry.registerComponent(‘AwesomeProject’, () => AwesomeProject);

หลังจากนั้นทำการ import ไฟล์ MainApp.js

import AwesomeProject from ‘./app/components/MainApp’;

หลังจากนั้นก็ไปทำการแก้ไขเช่นเดียวกันกับไฟล์ index.ios.js

เป็นอันเสร็จในการสร้างไฟล์กลาง ทดลองRun ดูจะได้ดังภาพ

iOS
Android
Like what you read? Give olDuelo a round of applause.

From a quick cheer to a standing ovation, clap to show how much you enjoyed this story.