本教程內(nèi)容和https://zhiwehu.gitbooks.io/react-native/content/ 同步更新。

使用Switch來(lái)修改todo item的狀態(tài)

今天我們將使用React Native的Switch控件來(lái)修改一個(gè)todo item的狀態(tài)。

首先修改row.js文件，導(dǎo)入Switch

import {View, Text, StyleSheet, Switch} from "react-native";

然后使用這個(gè)Switch控件，非常簡(jiǎn)單，我們只要將todo.complete屬性傳給Switch的value屬性即可。注意我們?cè)谏瞎?jié)中，將整個(gè)todo item的屬性都傳給了Row的props，所以這里只需要使用this.props.complete即可。

<Switch
  value = {this.props.complete}
/>

我們需要給Switch的onValueChange綁定一個(gè)事件的處理方法，我們并不在row.js里定義這個(gè)事件的處理方法，而是和之前的方式一樣，將這個(gè)方法通過(guò)props傳遞進(jìn)去。

<Switch
  value = {this.props.complete}
  onValueChange = {this.props.onComplete}
/>

這個(gè)onComplete是在app.js里傳遞給row的。

<Row
  key={key}
  onComplete = {(complete) => this.handleToggleComplete(key, complete)}
  {...value}
/>

我們來(lái)定義這個(gè)handleToggleComplete方法：

handleToggleComplete(key, complete) {
  const newItems = this.state.items.map((item) => {
    if (item.key !== key) return item;
    return {
      ...item,
      complete
    }
  });

  this.setSource(newItems, newItems);
}

這里使用了Array.map方法，遍歷todo list里每一條todo，如果發(fā)現(xiàn)其key和傳遞進(jìn)來(lái)的key相同，使用ES6的...操作符來(lái)更新complete狀態(tài)。

以下是運(yùn)行結(jié)果。

代碼：https://github.com/zhiwehu/todo/tree/switch

1. React Native實(shí)戰(zhàn)開(kāi)發(fā)1：搭建開(kāi)發(fā)環(huán)境
2. React Native實(shí)戰(zhàn)開(kāi)發(fā)2：布局
3. React Native實(shí)戰(zhàn)開(kāi)發(fā)3：模塊劃分
4. React Native實(shí)戰(zhàn)開(kāi)發(fā)4：屬性和狀態(tài)
5. React Native實(shí)戰(zhàn)開(kāi)發(fā)5：使用TextInput
6. React Native實(shí)戰(zhàn)開(kāi)發(fā)6：使用ListView
7. React Native實(shí)戰(zhàn)開(kāi)發(fā)7：使用Switch更新todo complete狀態(tài)
8. React Native實(shí)戰(zhàn)開(kāi)發(fā)8: 刪除todo item