React Native

// React Native 组件写法（示意，跑在 RN 运行时而非浏览器）
// 一个简单的待办列表
import React from 'react';
import { View, Text, FlatList, TouchableOpacity } from 'react-native';

var todos = [{ id: '1', text: '学 React' }, { id: '2', text: '写 App' }];

export default function App() {
  var [done, setDone] = React.useState({});
  var renderItem = function (_a) {
    var item = _a.item;
    return (
      <TouchableOpacity onPress={function () { setDone(Object.assign({}, done, { [item.id]: !done[item.id] })); }}>
        <View style={{ padding: 12 }}>
          <Text style={{ textDecorationLine: done[item.id] ? 'line-through' : 'none' }}>
            {done[item.id] ? '完成 ' : ''}{item.text}
          </Text>
        </View>
      </TouchableOpacity>
    );
  };
  return <FlatList data={todos} keyExtractor={function (i) { return i.id; }} renderItem={renderItem} />;
}