일기장 App.ts

import { Component, createElement } from 'react';

import { FlatList, Text, TouchableOpacity, View } from 'react-native';

type triple = { id: number, title: string, content: string };

type ItemProps = { element: any, on_press: () => void, colour: string };

class Item extends Component<ItemProps> {

  render() {

    return createElement(

      TouchableOpacity,

      { onPress: this.props.on_press, style: { backgroundColor: this.props.colour }},

      createElement(Text, {}, this.props.element.title)

    )

  }

}

export default class App extends Component<undefined, { index: number }> {

  private data: triple[] = [

    { id: 0, title: '가', content: 'A' },

    { id: 1, title: '나', content: 'B' },

    { id: 2, title: '다', content: 'C' },

    { id: 3, title: '라', content: 'D' }

  ];

  constructor(props: undefined) {

    super(props);

    this.state = { index: 0 };

  }

  render() {

    return createElement(

      View,

      {},

      createElement(

        FlatList,

        { 

          data: this.data,

          renderItem: ({ item }) => createElement(

            Item,

            { 

              element: item,

              on_press: () => this.setState({ index: item.id }),

              colour: item.id == this.state.index ? 'palegreen' : 'mediumspringgreen'

            }

          )

        }

      ),

      createElement(Text, {}, this.data[this.state.index].content)

    );

  }

}