React Native：开发iOS 2

Nativeอจากตอนที่แล้วReact Native：iOS开发人员ตอนที่1ขอเริ่มเกริ่ริ่นพื้นฐานอีกนิดหน่อยถ้าอ่านแล้วยังไม่เข้าใจก็อย่าเพิ่งตกใจ

พื้นฐาน

งอมูลสองประเภทที่ใช้ในการควบคุมการทำงานของ组件-道具状态

道具ถูกกำหนและคงที่ไปตลาโดย父และคงที่ไปตลอด终身ของ组件เลยในขณะที่状态คือข้อมูลที่เปลี่ยนแปลงได้

คื คืcreation创建参数ซึ่งสมมมีมมๆกำลังจะถูกสที่ั้ั้creation creation creation

 这个道具。  myCreationParameter 

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

  render（）{ 
 让pic = { 
  uri：“ https：//url_to_image/test_image.jpg” 
  }; 
 返回（ 
  <Image source = {pic} style = {{width：193，height：110}}} /> 
  ）; 
  } 

注意—括号{}ในการ嵌入ตัวแปรเข้าไปในJSXและภายใต้{}เราสามารถใส่JavaScript表达式เข้าไปได้

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

  问候类扩展了组件{ 
  render（）{ 
 返回（ 
  您好{ this.props.name }！ 
  ）; 
  } 
  } 

สนได้ว่าคลาส问候มีการเรียกใช้道具ที่ชื่อ ‘ name ‘ ส่วนโค้ดด้านล่างเป็นงเป็ากรเรียกใช้คลาส问候สร้อมกำหนดค่าของตัวแปร道具’name’

  class OtherClass扩展Component { 
  render（）{ 
 返回（ 
   
   
   
   
  ）; 
  } 
  } 

站

ทั่วไปยทั่วไป状态จะถูก初始化ใน构造函数ยกตัวอย่างเช่น

 构造函数（道具）{ 
 超级（道具）; 
 这个。  状态 = { myStateVariable ：true}; 
  } 

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

 这个。  setState （{ myStateVariable：false }） 

风格

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

核心组件ทั้งหมดมีการใช้prop’style ‘ โดยที่ 名称值value 样式样式 CSS 样式样式样式样式样式样式样式样式样式样式样式样式样式

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

 类LotsOfStyles扩展了Component { 
  render（）{ 
 返回（ 
   
  只是红色 
  先是蓝色，然后是红色 
   
  ）; 
  } 
  } 

  const styles = StyleSheet.create （{ 
 大蓝色： { 
 颜色：“蓝色”， 
  fontSize：30， 
  }， 
 红色：{ 
 红色'， 
  }， 
  }）; 

高八和宽

mentารกำหนด尺寸ขอข组件แบ่งได้เป็น2ลักษณะ—固定Flex Flex

固定：เป็นการกำหนดค่าคงที่ไปเลยการแสดงdimentionในReactนั้นไม่มีunit（Unitless）วิธีนี้เหมาะสำหรับการแสดง组件ที่มีขนาดเท่าเดิมโดยไม่ขึ้นกับขนาดของหน้าจอยกตัวอย่างเช่น

  <View style = {{ width ：50， height ：50，backgroundColor：'blue'}} /> 
  <View style = {{ width ：150， height ：150，backgroundColor：'red'}} /> 

Flex：เป็นการแสดงผลที่มีการขยายการหดของ组件โดยขึ้นกับพื้นที่ที่ว่างอยูและ组件parent

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

   
  <View style = {{ flex ：1，backgroundColor：'red'}} /> 
  <View style = {{ flex ：3，backgroundColor：'skyblue'}} /> 
   

放映Flexbox

布局布局子组件组件Flexbox算法样式3布局flexDirection，alignItems， justifyContent

Flexbox布局布局CSS CSS布局布局布局布局默认CSS布局

弯曲方向

Flex Directionคือแกนหลัก（主轴）งอง布局สามารถกำหนดให้เป็นแนวนอน（水平）หรือว่าแนวตั้ง（垂直）ก็ได้า默认เป็นแนวตั้ง

  <视图样式= {{flex：1， flexDirection ：'row'}}> 
   
   
   
   

证明内容合理

证明内容的合法性（分发），子级子组件ในแนวแกนหลัก（主轴）

  <查看样式= {{ 
 弹性：1， 
  flexDirection：'列'， 
  justifyContent ：'space-between'， 
  }}> 

对齐项目

对齐项คือ对齐ของ子ตามแกนรอง（次级轴）

滚动视图VS列表视图

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

Listา列表视图มันคล้ายั้UITableViewของiOSนั้นเอง