Help us understand the problem. What is going on with this article?

【React Native入門】3-3 UIコンポーネント FlatListとSectionList

「React Native入門 掌田 津耶乃著」にて動作確認したコードを逐一まとめた記事です。
基本は自分用のメモですので、動作確認したい場合ご利用ください。
ある程度は1記事を更新していき、セッションが切り替わったら別記事に残していこうと思います。

目次
[ P.117〜P.119 ] FlatList
[ P.120〜P.122 ] より複雑な表示を作る
[ P.122〜P.127 ] SectionListについて


[ P.117〜P.119 ] FlatList

変数 = [
    { キー: '' },
];

<FlatList
 data={ 変数 }
 renderItem={ this.表示 }
/>

表示 = ({ item }) => 
<Text style={ styles.スタイル名 }>{ item.キー }</Text>;
// ここの({ item })は固定っぽい
App.js
import React, { Component } from 'react';
import { StyleSheet, Alert, Button, TextInput, Image, Switch, Slider, Picker, FlatList, StatusBar, Text, View } from 'react-native';

export default class App extends Component {
  items = [
    { key: 'Windows' },
    { key: 'MacOS' },
    { key: 'Linux' },
    { key: 'ChromeOS' },
    { key: 'Fucsia' },
  ];

  constructor(props) {
    super(props);
    this.title = 'FlatList Layout';
    StatusBar.setBackgroundColor('dark-content', true);
    StatusBar.setBackgroundColor('#008080', true);
  }

  render() {
    return (
      <View style={styles.base}>
        <View style={styles.body}>
          <Text style={ styles.title }>{ this.title }</Text>
          <FlatList
            data={ this.items }
            renderItem={ this.getItem }
          />
        </View>
      </View>
    );
  }

  getItem = ({ item }) => 
  <Text style={ styles.item }>{ item.key }</Text>;

}

const styles = StyleSheet.create ({
  base: {
    padding: 0,
    flex: 1,
  },
  body: {
    padding: 10,
    flex: 1,
  },
  title: {
    padding: 35,
    color: 'skyblue',
    textAlign: 'center',
    fontSize: 25,
  },
  item: {
    padding: 5,
    color: '#000',
    fontSize: 15,
  },
});

[ P.120〜P.122 ] より複雑な表示を作る

App.js
import React, { Component } from 'react';
import { StyleSheet, Alert, Button, TextInput, Image, Switch, Slider, Picker, FlatList, StatusBar, Text, View } from 'react-native';

export default class App extends Component {
  items = [
    { name: 'Taro', age: 36, mail: 'taro@example.com' },
    { name: 'Hanako', age: 29, mail: 'hanako@example.com' },
  ];

  constructor(props) {
    super(props);
    this.title = 'FlatList Layout';
    StatusBar.setBackgroundColor('dark-content', true);
    StatusBar.setBackgroundColor('#008080', true);
    this.state = {
      message: 'Select Me!',
    }
  }

  render() {
    return (
      <View style={styles.base}>
        <View style={styles.body}>
          <Text style={ styles.title }>{ this.title }</Text>
          <Text style={ styles.message }>{ this.state.message }</Text>
          <FlatList
            data={ this.items }
            renderItem={ this.getItem }
          />
        </View>
      </View>
    );
  }

  getItem = ({ item }) => {
    return (
      <View style={ styles.item }>
        <Text
          style={ styles.itemTitle }
          onPress={ () => this.doAction(item) }
        >
          { item.name } ({ item.age })
        </Text>
        <Text style={ styles.itemMail }>
          { item.mail }
        </Text>
      </View>
    );
  }

  doAction = (item) => {
    this.setState({
      selected: item.id * 1,
      message: 'select: ' + item.name.toString()
      + '(' + item.age.toString() + ')',
    });
  }

}

const styles = StyleSheet.create ({
  base: {
    padding: 0,
    flex: 1,
  },
  body: {
    padding: 10,
    flex: 1,
  },
  title: {
    padding: 35,
    color: 'skyblue',
    textAlign: 'center',
    fontSize: 25,
  },
  item: {
    margin: 2,
    padding: 15,
    color: '#ccccff',
  },
  itemTitle: {
    padding: 10,
    borderStyle: 'solid',
    borderWidth: 1,
    backgroundColor: 'white',
    fontSize: 24,
  },
  itemMail: {
    textAlign: 'right',
    padding: 10,
    fontSize: 18,
    backgroundColor: '#000066',
    color: 'white',
  }
});

[ P.122〜P.127 ] SectionListについて

<SectionList
 sections=表示用データ
 renderItem=アイテム表示
 renderSectionHeader=セクションヘッダー表示
 keyExtractor=キーの指定
/>
App.js
import React, { Component } from 'react';
import { StyleSheet, Alert, Button, TextInput, Image, Switch, Slider, Picker, FlatList, SectionList, StatusBar, Text, View } from 'react-native';

export default class App extends Component {
  sections = [
    { title: 'PC', data: ['Windows', 'MacOS', 'ChromeOS'] },
    { title: 'Mobile', data: ['Andoroid', 'iOS'] },
  ];

  constructor(props) {
    super(props);
    this.title = 'SectionList Layout';
    StatusBar.setBackgroundColor('dark-content', true);
    StatusBar.setBackgroundColor('#008080', true);
    this.state = {
      message: 'Select Me!',
    }
  }

  render() {
    return (
      <View style={styles.base}>
        <View style={styles.body}>
          <Text style={ styles.title }>{ this.title }</Text>
          <Text style={ styles.message }>{ this.state.message }</Text>
          <SectionList
            sections={ this.sections }
            renderItem={ this.getItem }
            renderSectionHeader={ this.getSection }
            keyExtractor={ (item, index) => index }
          />
        </View>
      </View>
    );
  }

  // getItem
  getItem = ({ item }) => {
    return (
      <View style={ styles.item }>
        <Text
          style={ styles.item }
          onPress={ () => this.doAction(item) }
        >
          { item }
        </Text>
      </View>
    );
  }
  // doAction処理
  doAction = (item) => {
    this.setState({
      message: 'select:"' + item + '" item.',
    });
  }

  // getSection
  getSection = ({ section }) => {
    return (
      <Text 
        style={ styles.section }
        onPress={ () => this.doActionSec(section) }
      >
        { section.title }
      </Text>
    );
  }
  // doActionSec処理
  doActionSec = (section) => {
    this.setState({
      message: 'select:"' + section.title + '" sec.',
    });
  }

}

const styles = StyleSheet.create ({
  base: {
    padding: 0,
    flex: 1,
  },
  body: {
    padding: 10,
    flex: 1,
  },
  title: {
    padding: 35,
    color: '#000',
    textAlign: 'center',
    fontSize: 25,
  },
  section: {
    padding: 10,
    margin: 2,
    color: 'skyblue',
    fontSize: 24, 
    fontWeight: 'bold',
  },
  item: {
    margin: 2,
    padding: 15,
    color: '#fff',
    fontSize: 20, 
    backgroundColor: 'skyblue',
  },
});
dai_designing
本職はデザイナーですが、2017年の8月からphpでプログラミングをはじめ、CakePHP、Laravel などのフレームワークや最近はVueなどJS周りの強化に日々奮闘しております。 当面の目標はチュートリアルレベルでいろいろ作れるようになること。 いずれは自分で考えたアプリを実装していきたい。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした