React Native : dev iOS ตอนที่ 2

ต่อจากตอนที่แล้ว React Native: ฝึก iOS Dev ตอนที่ 1 ขอเริ่มเกริ่นพื้นฐานอีกนิดหน่อย ถ้าอ่านแล้วยังไม่เข้าใจก็อย่าเพิ่งตกใจ เดี๋ยวค่อยกลับมาทวนใหม่ตอนที่ลงมือปฎิบัติไปบ้างแล้ว

พื้นฐาน

มีข้อมูลสองประเภทที่ใช้ในการควบคุมการทำงานของ component — props และ state

prop ถูกกำหนดค่าโดย parent และคงที่ไปตลอด lifetime ของ component เลย ในขณะที่ state คือ ข้อมูลที่เปลี่ยนแปลงได้

Props คือ creation parameter ซึ่งสามารถถูกเรียกใช้งานได้ตอนที่ component นั้นๆกำลังจะถูกสร้างขึ้นมา สามารถอ้างถึงได้ตามรูปแบบการเรียกข้างล่าง

this.props.myCreationParameter

React Native มี component พื้นฐานที่ชื่อว่า Image ซึ่งมีตัวแปร props ชื่อ ‘source’ สำหรับกำหนดรูปที่จะแสดง

render() {
let pic = {
uri: 'https://url_to_image/test_image.jpg'
};
return (
<Image source={pic} style={{width: 193, height: 110}}/>
);
}

Note — ใช้ braces { } ในการ embed ตัวแปรเข้าไปใน JSX และภายใต้ { } เราสามารถใส่ JavaScript expression เข้าไปได้

นอกจากนี้เรายังสามารถใช้ props ใน component ที่สร้างขึ้นมาเองได้ ตัวอย่างเช่น

class Greeting extends Component {
render() {
return (
<Text>Hello {this.props.name}!</Text>
);
}
}

จะเห็นได้ว่าคลาส Greeting มีการเรียกใช้ props ที่ชื่อname ส่วนโค้ดด้านล่างเป็นการเรียกใช้คลาส Greeting พร้อมกำหนดค่าของตัวแปร props ‘name’

class OtherClass extends Component {
render() {
return (
<View style={{alignItems: 'center'}}>
<Greeting name='Rexxar' />
<Greeting name='Jaina' />
</View>
);
}
}

State

โดยทั่วไป state จะถูก Initialise ใน constructor ยกตัวอย่างเช่น

constructor(props) {
super(props);
this.state = { myStateVariable: true };
}

และเปลี่ยนค่าเมื่อต้องการ โดยใช้ฟังก์ชัน setState เช่น

this.setState({ myStateVariable: false })

Style

React Native ใช้ JavaScript ในการกำหนดรูปแบบ

Core component ทั้งหมดมีการใช้ prop ‘style’ โดยที่ name และ value ของ ‘style’ โดยทั่วไปแล้วเหมือนกันกับ CSS เว้นแต่ว่าการตั้งชื่อของ ‘style’ นั้น จะเขียนแบบ camel casting เช่น backgroundColor แทนที่จะเป็น background-color อย่าง CSS

prop ‘style’ สามารถเป็นได้ทั้ง plain old JavaScript object หรือว่าจะเป็น array ของ styles ก็ได้ แต่สำหรับ component ใหญ่ที่ซับซ้อน มีวิธีที่ clean กว่าก็คือ การเขียน style ไว้ในที่เดียวกันโดยการใช้ StyleSheet.create

class LotsOfStyles extends Component {
render() {
return (
<View>
<Text style={styles.red}>just red</Text>
<Text style={[styles.bigblue, styles.red]}>bigblue, then red</Text>
</View>
);
}
}
const styles = StyleSheet.create({
bigblue: {
color: 'blue',
fontSize: 30,
},
red: {
color: 'red',
},
});

Height & Width

การกำหนด dimention ของ component แบ่งได้เป็น 2 ลักษณะ — Fixed และ ​Flex

Fixed: เป็นการกำหนดค่าคงที่ไปเลย การแสดง dimention ใน React นั้นไม่มี unit (Unitless) วิธีนี้เหมาะสำหรับการแสดง component ที่มีขนาดเท่าเดิมโดยไม่ขึ้นกับขนาดของหน้าจอ ยกตัวอย่างเช่น

<View style={{width: 50, height: 50, backgroundColor: 'blue'}} />        
<View style={{width: 150, height: 150, backgroundColor: 'red'}} />
Fixed Dimention

Flex: เป็นการแสดงผลที่มีการขยาย การหดของ component โดยขึ้นกับพื้นที่ที่ว่างอยู และ component ที่มี parent เดียวกัน ยิ่งค่า flex มีค่ามากเท่าไหร่ ยิ่งแสดงผลขนาดที่มีอัตราส่วนมากขึ้นเท่านั้น

ยกตัวอย่างเช่น จากโค้ดด้านล่าง View สีแดงมีขนาดเป็น 1 ส่วนเมื่อเทียบกันกับ View สีฟ้าซึ่งมีขนาดเป็น 3 ส่วน

<View style={{flex: 1}}>
<View style={{flex: 1, backgroundColor: 'red'}} />
<View style={{flex: 3, backgroundColor: 'skyblue'}} />
</View>
Flex Dimention

Layout ด้วย Flexbox

เราสามารถกำหนด layout ของ child component ได้โดยการใช้ Flexbox algorithm ซึ่งเราจะเล่นกับ style 3 ค่านี้ flexDirection, alignItems, และ justifyContent

Flexbox ทำงานเหมือนกับการวาง layout ใน CSS บนเว็บ แต่ก็มีข้อยกเว้นบางอย่างที่ไม่เหมือนกัน ยกตัวอย่างเช่น ค่า default ที่ต่างกัน

Flex Direction

Flex Direction คือ แกนหลัก (Primary axis) ของ layout สามารถกำหนดให้เป็นแนวนอน (horizontal) หรือว่า แนวตั้ง (vertical) ก็ได้ ค่า default เป็นแนวตั้ง

<View style={{flex: 1, flexDirection: 'row'}}>
<View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue}} />
</View>

Justify Content

Justify Content คือการกระจายตัว (distribution) ของ child component ในแนวแกนหลัก (Primary Axis)

<View style={{
flex: 1,
flexDirection: 'column',
justifyContent: 'space-between',
}}>
    <View style={{width: 50, height: 50, backgroundColor: 'powderblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'skyblue'}} />
<View style={{width: 50, height: 50, backgroundColor: 'steelblue'}} />
</View>
justifyContent — center, flex-end, flex-start
justifyContent — space-around, space-between

Align Items

Align Items คือ alignment ของ child ตามแกนรอง (Secondary Axis)

Scroll View VS List View

ข้อแตกต่างของ Scroll View กับ List View ก็คือ List View จะ render เฉพาะสิ่งที่อยู่ในบนหน้าจอเท่านั้น แต่สำหรับ Scroll View นั้น ทุกอย่างจะถูก render ทั้งหมด

พูดได้ว่า List View มันคล้ายๆกับ UITableView ของ iOS นั้นเอง


One clap, two clap, three clap, forty?

By clapping more or less, you can signal to us which stories really stand out.