A Cold Dive into React Native (บทช่วยสอนสำหรับผู้เริ่มต้น)

เมื่อมีการประกาศ React Native ปฏิกิริยาแรกเป็นไปในเชิงบวกอย่างท่วมท้น ตามเนื้อผ้า เมื่อเราคิดถึงเทคโนโลยีเว็บในพื้นที่มือถือ สิ่งต่าง ๆ เช่น Apache Cordova ผุดขึ้นในใจ ซึ่งทำให้เราสามารถจัดแพ็คเกจเว็บไซต์หรือเว็บแอปพลิเคชันเป็นแอปพลิเคชันสำหรับแพลตฟอร์มมือถือ ในบทช่วยสอนสำหรับผู้เริ่มต้นนี้ เราจะมาดูสถาปัตยกรรมของ React Native ปรัชญาเบื้องหลัง React Native และความแตกต่างจากโซลูชันอื่นๆ ในพื้นที่เดียวกัน ในตอนท้ายของบทความ เราจะแปลงแอปพลิเคชัน "Hello World" ของ React เป็นแอปพลิเคชัน React Native

ให้เราเริ่มด้วยการบอกว่า React Native เป็นเทคโนโลยีที่ค่อนข้างใหม่ เปิดให้ใช้งานอย่างเป็นทางการตั้งแต่เดือนมีนาคม 2558 โดยอยู่ในรุ่นเบต้าส่วนตัวตั้งแต่ต้นปี และใช้งานภายใน Facebook มาระยะหนึ่งก่อนหน้านั้น คำว่า "กรุงโรมไม่ได้สร้างเสร็จในวันเดียว" มักใช้กับเทคโนโลยีได้เช่นกัน เครื่องมืออย่าง grunt และแพลตฟอร์มอย่าง Node.js ใช้เวลาหลายปีกว่าจะเติบโต ในโลกของเว็บ สิ่งต่าง ๆ กำลังเคลื่อนไหวอย่างรวดเร็ว และด้วยเฟรมเวิร์ก แพ็คเกจ และเครื่องมือจำนวนมากที่ออกมาทุกวัน นักพัฒนามักจะสงสัยมากขึ้นเล็กน้อยและไม่ต้องการกระโดดข้ามกลุ่มโฆษณาที่เกินจริงเพียงเพื่อจะตระหนักว่า พวกเขาลงเอยด้วยสถานการณ์การล็อคอินของผู้ขาย เราจะพูดถึงสิ่งที่ทำให้ React Native มีความพิเศษ เหตุใดเทคโนโลยีจึงคุ้มค่าที่จะเข้าไป และครอบคลุมถึงบางกรณีที่ไม่ใช่ยูนิคอร์นและสายรุ้งทั้งหมด

ภายใต้ประทุน

เมื่อพูดถึงเทคโนโลยีเว็บบนมือถือ โซลูชันที่พร้อมใช้งานมักจะจัดอยู่ในหมวดหมู่ใดหมวดหมู่หนึ่งต่อไปนี้

การรวมเว็บแอปพลิเคชันในเว็บเบราว์เซอร์บนมือถือ

เว็บแอปพลิเคชันทำงานในเบราว์เซอร์มือถือ ปกติจะเรียกว่า WebView หากไม่มีการปรับโครงสร้างใหม่ เว็บไซต์หรือเว็บแอปพลิเคชันจะทำงานบนอุปกรณ์มือถือ เราอาจต้องพิจารณาเหตุการณ์ของเบราว์เซอร์มือถือ เช่น การแตะหรือฟังการเปลี่ยนแปลงการวางแนวอุปกรณ์และหน้าจอที่เล็กลงเพื่อประสบการณ์ผู้ใช้ที่สมบูรณ์ แต่เรามีเวอร์ชันสำหรับมือถือที่ใช้งานได้โดยใช้ความพยายามเพียงเล็กน้อย Cordova/PhoneGap เป็นตัวเลือกยอดนิยมในหมวดหมู่นี้ น่าเสียดายที่ตัวเลือกนี้มีข้อเสียอย่างมาก: ในบางกรณี แอปพลิเคชันที่พัฒนาโดยใช้ Cordova จะช้ากว่าแอปพลิเคชันแบบเนทีฟอย่างมาก โดยเฉพาะอย่างยิ่งสำหรับแอปพลิเคชันที่มีกราฟิกหนัก ในกรณีอื่นๆ ระบบปฏิบัติการมือถือไม่ได้ให้บริการคุณลักษณะทั้งหมดใน WebView ที่มีอยู่ในเบราว์เซอร์มือถือ ประสบการณ์ผู้ใช้ยังสามารถแตกต่างจากแอปพลิเคชันดั้งเดิม สิ่งนี้อาจเกิดขึ้นเนื่องจากแอปพลิเคชันหรือแพลตฟอร์มเอง ปัญหานี้อาจมีตั้งแต่แถบเลื่อนที่ไม่รู้สึกเหมือนเดิมไปจนถึงการหน่วงเวลาที่เห็นได้ชัดเจนเมื่อแตะองค์ประกอบ

รวบรวมเทคโนโลยีดั้งเดิม

ทางออกที่แตกต่างอย่างสิ้นเชิงคือการสร้างฐานรหัสดั้งเดิมในตอนท้าย สิ่งนี้เกิดขึ้นโดยการแปลงซอร์สโค้ดต้นฉบับเป็นภาษาการเขียนโปรแกรมอื่น เราแลกเปลี่ยนประสิทธิภาพดั้งเดิมสำหรับเลเยอร์นามธรรมที่มีความไม่แน่นอนบางอย่าง ในกรณีของโซลูชันแบบปิด เราไม่แน่ใจด้วยซ้ำว่าเกิดอะไรขึ้นภายใต้ประทุนและกับกล่องดำประเภทใดที่เรากำลังเผชิญอยู่ ในกรณีอื่นๆ เราไม่แน่ใจว่าการอัปเดตระบบปฏิบัติการมือถือครั้งต่อไปจะทำให้โค้ดของเราเสียหายมากเพียงใด และเมื่อใดที่การแก้ไขหรือการอัปเดตจะพร้อมใช้งาน ตัวอย่างยอดนิยมของหมวดหมู่นี้คือ Haxe

การใช้ JavaScript Layer

ที่นี่เราใช้เอ็นจิ้น JavaScript ของสภาพแวดล้อมมือถือและรัน JavaScript ของเราที่นั่น การควบคุมแบบเนทีฟถูกแมปกับออบเจ็กต์และฟังก์ชัน JavaScript ดังนั้นเมื่อเราเรียกใช้ฟังก์ชันที่เรียกว่า fancyButtonRightHere() ปุ่มจะปรากฏขึ้นบนหน้าจอ NativeScript หรือ Appcelerator Titanium เป็นตัวอย่างที่รู้จักกันดีของหมวดหมู่นี้

React Native สามารถจัดเป็นบางอย่างจากหมวดหมู่ที่สาม สำหรับเวอร์ชัน iOS และ Android React Native ใช้ JavaScriptCore ภายใต้ประทุน ซึ่งเป็นเอ็นจิ้น JavaScript เริ่มต้นบน iOS JavaScriptCore ยังเป็นเอ็นจิ้น JavaScript ในเบราว์เซอร์ Safari ของ Apple นักพัฒนา OS X และ iOS สามารถเชื่อมต่อกับมันได้โดยตรงหากต้องการ

ข้อแตกต่างที่สำคัญประการหนึ่งคือ React Native รันโค้ด JavaScript ในเธรดที่แยกจากกัน ดังนั้นอินเทอร์เฟซผู้ใช้จะไม่ถูกบล็อกและแอนิเมชั่นควรมีความนุ่มนวลและราบรื่น

React เป็นฟีเจอร์หลัก

เป็นที่น่าสังเกตว่า "React" ใน React Native ไม่ได้เกิดขึ้นโดยบังเอิญ สำหรับ React Native เราต้องการความเข้าใจในสิ่งที่ React นำเสนอ แนวคิดต่อไปนี้ทำงานเหมือนกันทั้งใน React และ React Native แม้ว่าตัวอย่างโค้ดเหล่านี้ได้รับการปรับแต่งให้ทำงานในเบราว์เซอร์

จุดเข้าใช้งานการแสดงผลเดี่ยว

เมื่อเราพิจารณาส่วนประกอบ React อย่างง่าย สิ่งแรกที่เราอาจสังเกตเห็นคือส่วนประกอบนั้นมีฟังก์ชันการ render นเดอร์ อันที่จริง React จะแสดงข้อผิดพลาดหากไม่มีฟังก์ชันการเรนเดอร์ที่กำหนดไว้ภายในส่วนประกอบ

 var MyComponent = function() { this.render = function() { // Render something here }; };

สิ่งพิเศษคือเราไม่ยุ่งกับองค์ประกอบ DOM ที่นี่ แต่เราส่งคืนโครงสร้างแบบ XML ซึ่งแสดงถึงสิ่งที่จะแสดงผลใน DOM โครงสร้างแบบ XML นี้เรียกว่า JSX

 var MyComponent = function() { this.render = function() { return <div className="my-component">Hello there</div>; }; };

หม้อแปลง JSX พิเศษใช้โค้ดที่มีลักษณะเป็น XML ทั้งหมดและแปลงเป็นฟังก์ชัน นี่คือสิ่งที่องค์ประกอบหลังจากการแปลงจะมีลักษณะดังนี้:

 var MyComponent = function() { this.render = function() { return React.createElement("div", { className: "my-component" }, "Hello there"); }; };

ข้อได้เปรียบที่ใหญ่ที่สุดคือการดูส่วนประกอบอย่างรวดเร็ว เรารู้เสมอว่าควรทำอะไร ตัวอย่างเช่น <FriendList /> อาจแสดงคอมโพเนนต์ <Friend /> จำนวนหนึ่ง เราไม่สามารถแสดงส่วนประกอบของเราที่อื่นได้นอกจากในฟังก์ชันการ render นเดอร์ ดังนั้นจึงไม่ต้องกังวลว่าเราไม่รู้ว่าส่วนประกอบที่แสดงผลของเรามาจากไหน

การไหลของข้อมูลแบบทิศทางเดียว

ในการสร้างเนื้อหาของส่วนประกอบ React จะจัดเตรียมคุณสมบัติหรืออุปกรณ์ประกอบฉากโดยย่อ คล้ายกับแอตทริบิวต์ XML เราส่งผ่านอุปกรณ์ประกอบฉากโดยตรงไปยังส่วนประกอบ และจากนั้นสามารถใช้อุปกรณ์ประกอบฉากภายในองค์ประกอบที่สร้างขึ้น

 var Hello = function(props) { this.render = function() { return <div className="my-component">Hello {props.name}</div>; }; }; var Greeter = function() { this.render = function() { return <Hello name="there" /> } };

สิ่งนี้นำไปสู่ส่วนประกอบของเราที่อยู่ในโครงสร้างที่เหมือนต้นไม้ และเราได้รับอนุญาตให้ส่งข้อมูลเมื่อสร้างองค์ประกอบย่อยเท่านั้น

แสดงผลอีกครั้งเมื่อมีการเปลี่ยนแปลง

นอกจากอุปกรณ์ประกอบฉากแล้ว ส่วนประกอบยังสามารถมีสถานะภายในได้อีกด้วย ตัวอย่างที่โดดเด่นที่สุดของพฤติกรรมดังกล่าวคือตัวนับการคลิกที่อัปเดตค่าเมื่อกดปุ่ม จำนวนการคลิกจะถูกบันทึกไว้ในสถานะ

การเปลี่ยนแปลงพร็อพและสถานะแต่ละรายการจะทริกเกอร์การแสดงคอมโพเนนต์อีกครั้งโดยสมบูรณ์

Virtual DOM

ตอนนี้เมื่อทุกอย่างแสดงผลใหม่เมื่ออุปกรณ์ประกอบฉากหรือสถานะเปลี่ยนแปลง เหตุใด React จึงทำงานได้ดี? ส่วนผสมมหัศจรรย์คือ "Virtual DOM" เมื่อใดก็ตามที่จำเป็นต้องแสดงผลซ้ำ DOM ที่อัปเดตจะถูกสร้างขึ้นเสมือน Virtual DOM ประกอบด้วยการแสดงแสงขององค์ประกอบที่สร้างแบบจำลองตามโครงสร้างส่วนประกอบ ทำให้กระบวนการสร้างองค์ประกอบเหล่านี้มีประสิทธิภาพมากกว่าการสร้างองค์ประกอบ DOM จริง ก่อนนำการเปลี่ยนแปลงไปใช้กับ DOM จริง จะมีการตรวจสอบเพื่อพิจารณาว่าการเปลี่ยนแปลงเกิดขึ้นที่ใดในแผนผังองค์ประกอบ ความแตกต่างจะถูกสร้างขึ้น และใช้เฉพาะการเปลี่ยนแปลงเหล่านั้นเท่านั้น

เริ่มต้นใช้งาน React Native Tutorial

มีข้อกำหนดเบื้องต้นบางประการที่ผู้เริ่มต้นจะต้องตั้งค่าเพื่อพัฒนาสำหรับ React Native เนื่องจาก iOS เป็นแพลตฟอร์มแรกที่ได้รับการสนับสนุน และเป็นแพลตฟอร์มที่เรากำลังพูดถึงในบทช่วยสอนนี้ เราจึงต้องใช้ macOS และ Xcode อย่างน้อยเวอร์ชัน 6.3 จำเป็นต้องมี Node.js ด้วย สิ่งที่ช่วยได้คือการติดตั้ง Watchman ผ่านตัวจัดการแพ็คเกจ Brew ด้วย brew install watchman แม้ว่าจะไม่จำเป็น แต่ก็ช่วยในการจัดการกับไฟล์จำนวนมากภายในโปรเจ็กต์ React Native ของเรา

ในการติดตั้ง React Native เราเพียงแค่ต้องติดตั้งแอปพลิเคชันบรรทัดคำสั่ง React Native ด้วย npm install -g react-native-cli การเรียกคำสั่ง react-native จะช่วยให้เราสร้างแอปพลิเคชัน React Native ใหม่ การเรียกใช้ react-native init HelloWorld จะสร้างโฟลเดอร์ชื่อ HelloWorld ซึ่งสามารถพบโค้ดสำเร็จรูปได้

การแปลงแอปพลิเคชัน React

ด้วย React เป็นคุณสมบัติหลักและหลักการหลักที่มาจากไลบรารี React มาดูกันว่าเราจำเป็นต้องแปลงแอปพลิเคชั่น React “Hello World” ขั้นต่ำเป็น React Native อย่างไร

เราใช้คุณลักษณะบางอย่างของ ES2015 ในตัวอย่างโค้ดนี้ โดยเฉพาะคลาส เป็นไปได้อย่างสมบูรณ์ที่จะติดกับ React.createClass หรือใช้รูปแบบฟังก์ชันที่คล้ายกับรูปแบบโมดูลยอดนิยม

 var React = require('react'); class HelloThere extends React.Component { clickMe() { alert('Hi!'); } render() { return ( <div className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</div> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

ขั้นตอนที่ 1: โอบกอดโมดูล CommonJS

ในขั้นตอนแรก เราต้องเปลี่ยนการกำหนดให้โมดูล React ใช้ react-native แทน

 var React = require('react-native'); class HelloThere extends React.Component { clickMe() { alert('Hi!'); } render() { return ( <div className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</div> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

สิ่งที่มักจะเป็นส่วนหนึ่งของไปป์ไลน์เครื่องมือเมื่อพัฒนาเว็บแอปพลิเคชัน React นั้นเป็นส่วนสำคัญของ React Native

ขั้นตอนที่ 2: ไม่มี DOM

ไม่น่าแปลกใจเลยที่ไม่มี DOM บนมือถือ เมื่อก่อนเราใช้ <div /> เราจำเป็นต้องใช้ <View /> และตำแหน่งที่เราใช้ <span /> องค์ประกอบที่เราต้องการที่นี่คือ <Text />

 import React from 'react'; import {View, Text, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('hi!'); } render() { return ( <View className="box" onClick={this.clickMe.bind(this)}>Hello {this.props.name}. Please click me.</View> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

แม้ว่าการวางข้อความโดยตรงในองค์ประกอบ <div /> จะค่อนข้างสะดวก แต่ในเนทีฟเวิลด์ text ไม่สามารถใส่โดยตรงใน <View /> เพื่อที่เราต้องแทรกองค์ประกอบ <Text />

 import React from 'react'; import {View, Text, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('hi!'); } render() { return ( <View className="box" onClick={this.clickMe.bind(this)}> <Text>Hello {this.props.name}. Please click me.</Text> </View> ); } } React.render(<HelloThere name="Component" />, document.getElementById('content'));

ขั้นตอนที่ 3: สไตล์อินไลน์คือหนทางสู่ความสำเร็จ

React Native ช่วยให้เราใช้การสร้างแบบจำลอง Flexbox แทนที่จะยุ่งกับ float และ inline-block ที่เราคุ้นเคยในโลกของเว็บ สิ่งที่น่าสนใจคือ React Native ไม่ได้ใช้ CSS

 import React from 'react'; import {View, Text, StyleSheet, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert('hi!'); } render() { return ( <View style={styles.box} onClick={this.clickMe.bind(this)}> <Text>Hello {this.props.name}. Please click me.</Text> </View> ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 } }); React.render(<HelloThere name="Component" />, document.getElementById('content'));

การใช้รูปแบบอินไลน์อาจทำให้ผู้เริ่มต้นสับสนได้ คล้ายกับการเปลี่ยนแปลงที่นักพัฒนา React ต้องเผชิญเมื่อต้องเผชิญกับ JSX และก่อนหน้านี้ใช้เครื่องมือสร้างเทมเพลตเช่น Handlebars หรือ Jade

แนวคิดคือเราไม่มีสไตล์ชีตทั่วโลกในแบบที่เราใช้ CSS เราประกาศสไตล์ชีตโดยตรงที่ระดับส่วนประกอบ ดังนั้นเราจึงมีข้อมูลทั้งหมดที่เราต้องการเพื่อดูว่าองค์ประกอบของเราทำอะไร เลย์เอาต์ที่สร้าง และสไตล์ที่นำไปใช้

 import React from 'react'; import {Text} from 'react-native'; var Headline = function(props) { this.render = () => <Text style={headlineStyle.text}>{props.caption}</Text>; }; var headlineStyles = StyleSheet.create({ text: { fontSize: 32, fontWeight: 'bold' } }); module.exports = Headline;

ขั้นตอนที่ 4: การจัดการเหตุการณ์

เทียบเท่ากับการคลิกในหน้าเว็บคือการแตะองค์ประกอบบนอุปกรณ์มือถือ มาเปลี่ยนรหัสของเราเพื่อให้ "การแจ้งเตือน" ปรากฏขึ้นเมื่อเราแตะองค์ประกอบ

 import React from 'react'; import {View, Text, StyleSheet, TouchableOpacity, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert("Hi!") } render() { return ( <TouchableOpacity onPress={this.clickMe()}> <View style={styles.box}> <Text>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 } }); React.render(<HelloThere name="Component" />, document.getElementById('content'));

แทนที่จะให้เหตุการณ์พร้อมใช้งานโดยตรงบนคอมโพเนนต์ <View /> เราจำเป็นต้องใช้องค์ประกอบที่เรียกเหตุการณ์อย่างชัดเจน ในกรณีของเราเป็นเหตุการณ์สัมผัสเมื่อกดมุมมอง มีส่วนประกอบที่สัมผัสได้หลายประเภท ซึ่งแต่ละอย่างให้ผลตอบรับด้วยภาพที่แตกต่างกัน

ขั้นตอนที่ 5: ปรับแต่งพฤติกรรมข้ามแพลตฟอร์ม

สามารถตรวจสอบได้ว่าแพลตฟอร์มใดที่แอปพลิเคชัน React Native กำลังทำงานอยู่ โดยการเข้าถึงค่าของ Platform.OS สมมติว่าในตัวอย่างข้างต้น เราต้องการแสดงข้อความเตือนที่แตกต่างกันตามแพลตฟอร์มที่เรากำลังดำเนินการอยู่ เราสามารถทำได้ดังนี้:

 ... clickMe() { var message = ''; if(Platform.OS == 'ios') { message = 'Welcome to iOS!'; } else if(Platform.OS == 'android') { message = 'Welcome to Android!'; } Alert.alert(message); } ...

อีกวิธีหนึ่งคือ วิธีการ select ก็มีให้เช่นกัน ซึ่งมีรูปแบบคล้ายสวิตช์:

 … clickMe() { Alert.alert(Platform.select({ ios: 'Welcome to iOS!', android: 'Welcome to Android!' }) ); } ...

ขั้นตอนที่ 6: แบบอักษรที่กำหนดเองและ react-native link

ในการเพิ่มแบบอักษรที่กำหนดเอง เราต้องข้ามผ่านห่วง ก่อนอื่น ตรวจสอบให้แน่ใจว่าชื่อเต็มของฟอนต์และชื่อไฟล์ของฟอนต์เหมือนกัน: iOS จะใช้ชื่อเต็มของฟอนต์เพื่อเลือกฟอนต์ ในขณะที่ Android ใช้ชื่อไฟล์

ดังนั้น หากชื่อเต็มของฟอนต์ของคุณคือ myCustomFont ตรวจสอบให้แน่ใจว่าชื่อไฟล์ของฟอนต์คือ myCustomFont.ttf

หลังจากนั้น เราต้องสร้างโฟลเดอร์เนื้อหาและชี้ไปที่โฟลเดอร์นั้น เราสามารถทำได้โดยการสร้างโฟลเดอร์ก่อน ภายใต้ assets/fonts ในไดเรกทอรีรากของแอปพลิเคชัน ไดเร็กทอรีอื่นจะทำได้ แต่นี่เป็นชื่อปกติที่ใช้สำหรับไดเร็กทอรีฟอนต์

เราสามารถบอก npm ที่เรามีทรัพย์สินของเราโดยเพิ่มคุณสมบัติ Assets ภายใต้ส่วนการรวม npm ของ React, rnpm:

 "rnpm": { "Assets": [ "./assets/fonts/" ] }

หลังจากที่เราทำทั้งหมดเสร็จแล้ว เราก็สามารถเรียกใช้ react-native link ได้ ซึ่งจะคัดลอกแบบอักษรไปยังไดเร็กทอรีที่ถูกต้องและจะเพิ่ม xml ที่จำเป็นลงใน info.plist บน iOS

เมื่อเสร็จแล้ว เราสามารถใช้แบบอักษรของเราโดยอ้างอิงในสไตล์ชีตใดก็ได้โดยใช้ชื่อเต็ม ลองใช้องค์ประกอบ Text ของเรา:

 import React from 'react'; import {View, Text, StyleSheet, TouchableOpacity, Alert} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert("Hi!") } render() { return ( <TouchableOpacity onPress={this.clickMe()}> <View style={styles.box}> <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> ); } } var styles = StyleSheet.create({ box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 }, message: { fontFamily: 'myCustomFont' } }); React.render(<HelloThere name="Component" />, document.getElementById('content'));

ขั้นตอนที่ 7: ย้ายสิ่งต่าง ๆ ไปรอบ ๆ

React Native ใช้กฎเดียวกันกับ Flexbox สำหรับการจัดวางส่วนประกอบ สมมติว่าเราต้องการวางตำแหน่งปุ่มของเราที่ด้านล่างของหน้าจอ: ลองห่อ TouchableOpacity ของเราด้วยคอนเทนเนอร์ View :

 <View style={styles.container}> <TouchableOpacity onPress={this.clickMe.bind(this)}> <View style={styles.box}> <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> </View>

และตอนนี้ มากำหนดสไตล์ container ร่วมกับสไตล์อื่นๆ ที่กำหนดไว้แล้ว:

 container: { flex: 1, justifyContent: 'center', alignItems: 'center' }

มาเน้นที่ justifyContent และ alignItems คุณสมบัติทั้งสองนี้ควบคุมวิธีการจัดองค์ประกอบตามแกนหลักและแกนรองตามลำดับ โดยค่าเริ่มต้น แกนหลักคือแกนแนวตั้ง และแกนทุติยภูมิคือแกนนอน (คุณสามารถเปลี่ยนได้โดยการตั้งค่าคุณสมบัติ flexDirection เป็น row )

justifyContent มีค่าที่เป็นไปได้หกค่าที่สามารถตั้งค่าเป็น:

• flex-start จะวางตำแหน่งองค์ประกอบทั้งหมดไว้ด้วยกัน ที่จุดเริ่มต้นของกล่องขอบเขตของส่วนประกอบ
• flex-end จะวางตำแหน่งองค์ประกอบทั้งหมดในตอนท้าย
• center จะวางตำแหน่งองค์ประกอบทั้งหมดไว้ตรงกลางของกรอบล้อมรอบ
• space-around จะกระจายส่วนประกอบอย่างเท่าเทียมกัน และจะจัดส่วนประกอบให้อยู่ตรงกลางในกล่องล้อมรอบที่สร้างขึ้น
• space-evenly จะกระจายส่วนประกอบอย่างเท่าเทียมกันเช่นกัน แต่จะพยายามเว้นระยะห่างระหว่างส่วนประกอบและขอบเขตอื่น ๆ ให้เท่ากัน
• space-between จะกระจายส่วนประกอบโดยการรักษาระยะห่างระหว่างส่วนประกอบที่อยู่ติดกันเท่ากัน

alignItems สามารถตั้งค่าที่เป็นไปได้สี่ค่า: flex-start , flex-end , center และ stretch สามตัวแรกทำงานเหมือนที่ทำเพื่อ justifyContent ในขณะที่การ stretch จะตั้งค่าส่วนประกอบให้ครอบครองพื้นที่ว่างทั้งหมดตามแนวแกน เพื่อให้แกนเต็มไปหมด

ดังนั้น เนื่องจากเราต้องการให้ TouchableOpacity ของเราแสดงที่ด้านล่างและอยู่กึ่งกลางตามแกนนอน เราสามารถเปลี่ยนสไตล์ดังนี้:

 container: { flex: 1, justifyContent: 'flex-end', alignItems: 'center' }

ข้อมูลเพิ่มเติมเกี่ยวกับค่า justifyContent และ alignItems สามารถพบได้ที่นี่และที่นี่

ขั้นตอนที่ 8: การลงทะเบียนแอปพลิเคชัน

เมื่อพัฒนาด้วย React สำหรับเบราว์เซอร์ เราเพียงแค่ต้องกำหนดจุดเชื่อมต่อ เรียก React.render และปล่อยให้ React ทำหน้าที่ของมัน ใน React Native สิ่งนี้แตกต่างออกไปเล็กน้อย

 import React from 'react'; import {View, Text, StyleSheet, TouchableOpacity, Alert, Platform} from 'react-native'; class HelloThere extends React.Component { clickMe() { Alert.alert(Platform.select({ ios: 'Welcome to iOS!', android: 'Welcome to Android!' })); } render() { return ( <View style={styles.container}> <TouchableOpacity onPress={this.clickMe.bind(this)}> <View style={styles.box}> <Text style={styles.message}>Hello {this.props.name}. Please click me.</Text> </View> </TouchableOpacity> </View> ); } } var styles = StyleSheet.create({ container: { flex: 1, justifyContent: 'flex-start', alignItems: 'center' }, box: { borderColor: 'red', backgroundColor: '#fff', borderWidth: 1, padding: 10, width: 100, height: 100 }, message: { fontFamily: 'myCustomFont' } }); var MainComponent = function() { this.render = function() { return <HelloThere name="Component" />; } }; AppRegistry.registerComponent('MainComponent', function() { return MainComponent; });

เราต้องลงทะเบียนส่วนประกอบสำหรับด้าน Objective-C ซึ่งทำโดยใช้วัตถุ AppRegistry ชื่อที่เราตั้งต้องตรงกับชื่อในโปรเจ็กต์ Xcode

แอปพลิเคชัน Hello World React Native ของเรามีโค้ดหลายบรรทัดมากกว่าคู่กันในเว็บ แต่ในทางกลับกัน React Native แยกข้อกังวลออกไปอีกเล็กน้อย โดยเฉพาะอย่างยิ่งเนื่องจากสไตล์ถูกกำหนดด้วยองค์ประกอบ

ตามบันทึกด้านข้าง เราไม่ควรรวมเมธอด clickMe กับบริบท this ในวิธีการ render นเดอร์ โดยเฉพาะอย่างยิ่งหากแอปพลิเคชัน React (เนทีฟ) ของเราเติบโตขึ้นจนซับซ้อนขึ้นเล็กน้อย มันรวมเมธอดในการเรียกใช้การเรนเดอร์ทุกครั้งซึ่งอาจมีจำนวนมาก ทางเลือกอื่นคือการผูกเมธอดภายในคอนสตรัคเตอร์

เรียกใช้แอปพลิเคชัน

ในการเรียกใช้แอปพลิเคชัน เราต้องแทนที่เนื้อหาของไฟล์ index.ios.js ด้วยโค้ดของแอปพลิเคชันที่แปลงแล้วของเราจากขั้นตอนที่แล้ว จากนั้นเราต้องเปิดโปรเจ็กต์ Xcode แล้วกดปุ่ม Run ขนาดใหญ่ ขั้นแรก เทอร์มินัลจะเปิดขึ้นพร้อมกับเซิร์ฟเวอร์ React Native จากนั้นหน้าต่างโปรแกรมจำลองจะปรากฏขึ้น เซิร์ฟเวอร์ React Native จะสร้างบันเดิล ซึ่งแอพพลิเคชั่นดั้งเดิมจะดึงออกมา ซึ่งช่วยให้เกิดวงจรการพัฒนาที่รวดเร็วเหมือนการพัฒนาเว็บ ซึ่งการเปลี่ยนแปลงจะมีผลในโปรแกรมจำลองเกือบจะในทันที

สำหรับ Android การเพิ่มสิ่งต่อไปนี้ในไฟล์ package.json ของคุณภายใต้ scripts ก็เพียงพอแล้ว:

 "android-linux": "react-native bundle --platform android --dev false --entry-file index.ios.js --bundle-output android/app/src/main/assets/index.android.bundle --assets-dest android/app/src/ main/res && react-native run-android"

แล้วรัน npm run android-linux ตรวจสอบให้แน่ใจว่าไดเร็กทอรี android/app/src/main/assets มีอยู่ล่วงหน้า

หลังจากที่เทอร์มินัลปรากฏขึ้น แอปพลิเคชันของเราจะแสดงขึ้นในตัวจำลอง การกด CMD+D จะแสดงเมนูการพัฒนา การคลิกที่กล่องจะแสดงการแจ้งเตือน เวอร์ชัน iOS:

และ Android แสดงผลดังนี้:

สำหรับการจัดจำหน่าย การมีแอปพลิเคชันที่ชี้ไปยังเซิร์ฟเวอร์การพัฒนาในพื้นที่จะไม่เป็นผลสำหรับเรา ด้วยเหตุนี้ เราจึงสามารถสร้างบันเดิลสำหรับการใช้งานเมื่อเซิร์ฟเวอร์ React Native ไม่ได้ทำงานด้วยคำสั่ง react-native bundle ในกรณีนั้น เราจำเป็นต้องอัปเดต didFinishLaunchingWithOptions ของ AppDelegate เพื่อใช้บันเดิลออฟไลน์

แอปพลิเคชันตัวอย่างนี้มีอยู่ใน Github ด้วย

การทำงานกับ React Native

สิ่งที่ควรค่าแก่การกล่าวขวัญอีกอย่างคือเราไม่เพียงแต่ใช้แนวคิดของ React และ JavaScript สำหรับแอปพลิเคชันมือถือของเราเท่านั้น แต่นักพัฒนาเว็บเวิร์กโฟลว์บางส่วนยังใช้งานได้กับ React Native ด้วย เมื่อมาจากการพัฒนาเว็บ เราจะคุ้นเคยกับเครื่องมือสำหรับนักพัฒนา การตรวจสอบองค์ประกอบ และการรีโหลดแบบสด

วิธีการทำงานของ React Native คือการรวมไฟล์ JavaScript ทั้งหมดของเราไว้ในบันเดิล บันเดิลนี้ให้บริการจากเซิร์ฟเวอร์หรือรวมเข้ากับแอปพลิเคชัน อย่างแรกมีประโยชน์อย่างเหลือเชื่อสำหรับการพัฒนาใน Simulator เนื่องจากเราสามารถเปิดใช้งานการรีโหลดแบบสดได้ เมนูสำหรับนักพัฒนา React ไม่ได้มีประสิทธิภาพเท่ากับเครื่องมือสำหรับนักพัฒนาของ Chrome แต่ให้ประสบการณ์นักพัฒนาที่เหมือนเว็บมาก ๆ ด้วยการโหลดซ้ำและการดีบักแบบสดด้วยเครื่องมือสำหรับนักพัฒนา/ดีบักเกอร์ Chrome (หรือ Safari)

นักพัฒนาเว็บคุ้นเคยกับ JSFiddle หรือ JSBin ซึ่งเป็นสนามเด็กเล่นออนไลน์สำหรับการทดสอบเว็บอย่างรวดเร็ว มีสภาพแวดล้อมที่คล้ายกันที่ช่วยให้เราสามารถลองใช้ React Native ในเว็บเบราว์เซอร์ได้

React Native: ทางเลือกที่มั่นคงและทันสมัย

เดิมทีฉันได้แนะนำวิธีที่ระมัดระวังมากขึ้นใน React Native วันนี้เป็นทางเลือกที่เป็นผู้ใหญ่และมั่นคง

ข้อดีอย่างหนึ่งของ React คือมันไม่ได้กำหนดเวิร์กโฟลว์ของคุณ เนื่องจากมันเป็นเพียงการแสดงชั้นของการดู คุณต้องการกำหนดไปป์ไลน์ Grunt ของคุณเองหรือไม่? หรือคุณอยากจะใช้ Webpack? และคุณจะใช้ Backbone.js สำหรับความต้องการของโมเดลของคุณหรือไม่? หรือคุณต้องการไปกับวัตถุ JavaScript ธรรมดา? คำตอบสำหรับคำถามเหล่านี้ทั้งหมดขึ้นอยู่กับคุณ เพราะ React ไม่ได้จำกัดตัวเลือกเหล่านี้ ดังที่เว็บไซต์อย่างเป็นทางการกล่าวไว้: “เนื่องจาก React ไม่ได้ตั้งสมมติฐานเกี่ยวกับสแต็กเทคโนโลยีที่เหลือของคุณ คุณจึงลองใช้ฟีเจอร์เล็กๆ น้อยๆ ในโปรเจ็กต์ที่มีอยู่ได้อย่างง่ายดาย”

ในระดับหนึ่ง สิ่งนี้เป็นจริงสำหรับ React Native เช่นกัน นักพัฒนามือถือสามารถรวม React Native เป็นส่วนหนึ่งของแอปพลิเคชันของพวกเขา ใช้ประโยชน์จากเวิร์กโฟลว์การพัฒนาที่ได้รับแรงบันดาลใจจากเว็บ และเลือกที่จะรวมไลบรารีในขนาดที่ใหญ่ขึ้นหากต้องการ

ไม่ว่าในกรณีใด สิ่งหนึ่งที่แน่นอนคือ React Native จะไม่หายไป Facebook มีส่วนได้ส่วนเสียอย่างมากในการมีแอพพลิเคชั่นที่ขับเคลื่อนโดย React Native หลายตัวในแอพสโตร์ ชุมชนรอบๆ React Native นั้นใหญ่โตและเติบโตอย่างต่อเนื่อง