Listコンポーネント
NativeBaseのListコンポーネントを使ってみます。
前提ライブラリ
本記事は、「NativeBase」、「React Navigation」の導入を前提としています。一からプロジェクトを作成する場合には、以下の記事を参考に環境作成してください。
【React Native】NativeBase導入
【React Native】React Navigation を使ってみる（画面遷移編）
基本形
以下のようにListコンポーネント内にListItemコンポーネントを配置して「テーブルビュー」を実現します。
<List>
<ListItem first>
<Left>
<Text>テキスト１</Text>
</Left>
</ListItem>
<ListItem first>
<Left>
<Text>テキスト２</Text>
</Left>
</ListItem>
</List>
注意点
公式ドキュメントにもあまり書いてないのですが、厳密な意味での「NativeBaseのListコンポーネント（Listタグ）」は、実は、deprecatedとなっています。学習としてではなく、実務に使いたいときは最後にある[FlatList]を使用する必要があります。（わかりにくいですね）
様々なセルの表現
Normal.js
import React, {Component} from 'react';
import { Container, Header, Left, Body, Right, Title, Button } from 'native-base';
import { Content, List, ListItem, Text, Icon, Switch, Thumbnail } from 'native-base';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<Container>
<Header>
<Left>
<Button transparent onPress={() => this.props.navigation.goBack()}>
<Icon name='arrow-back' />
</Button>
</Left>
<Body>
<Title>ノーマル</Title>
</Body>
<Right />
</Header>
<Content>
<List>
<ListItem first>
<Left>
<Text>Accessory:none</Text>
</Left>
</ListItem>
<ListItem>
<Left>
<Text>Accessory:Disclosure Indicator</Text>
</Left>
<Right>
<Icon name="arrow-forward" />
</Right>
</ListItem>
<ListItem>
<Left>
<Text>Accessory:Checkmark</Text>
</Left>
<Right>
<Icon type="Octicons" name="check" style={{fontSize: 20, color:'blue'}}/>
</Right>
</ListItem>
<ListItem icon>
<Left>
<Button style={{ backgroundColor: "#007AFF" }}>
<Icon active name="wifi" />
</Button>
</Left>
<Body>
<Text>Icon</Text>
</Body>
<Right>
<Switch value={false} />
</Right>
</ListItem>
<ListItem thumbnail>
<Left>
<Thumbnail square source={ require('../images/face.jpg') } />
</Left>
<Body>
<Text>Thumbnail</Text>
<Text note numberOfLines={1}>サムネイルの説明</Text>
</Body>
</ListItem>
<ListItem last>
<Left>
<Text>Last</Text>
</Left>
</ListItem>
</List>
</Content>
</Container>
);
}
}
| iOS | Android |
|---|---|
 |
 |
|
セクションの表現
Section.js
import React, {Component} from 'react';
import { Container, Header, Left, Body, Right, Title, Button } from 'native-base';
import { Content, List, ListItem, Text, Icon } from 'native-base';
type Props = {};
export default class App extends Component<Props> {
render() {
return (
<Container>
<Header>
<Left>
<Button transparent onPress={() => this.props.navigation.goBack()}>
<Icon name='arrow-back' />
</Button>
</Left>
<Body>
<Title>セクション</Title>
</Body>
<Right />
</Header>
<Content>
<List>
<ListItem itemDivider>
<Text>A</Text>
</ListItem>
<ListItem>
<Left>
<Text>Apple</Text>
</Left>
</ListItem>
<ListItem>
<Left>
<Text>airbnb</Text>
</Left>
</ListItem>
<ListItem itemDivider>
<Text>G</Text>
</ListItem>
<ListItem last>
<Left>
<Text>Google</Text>
</Left>
</ListItem>
</List>
</Content>
</Container>
);
}
}
| iOS | Android |
|---|---|
 |
 |
データをダイナミックに使用して
Dynamic.js
import React, { Component } from 'react';
import { Container, Header, Content, List, ListItem, Left, Right, Body, Text, Title, Button, Icon } from 'native-base';
export default class DynamicListExample extends Component {
constructor(props){
super(props);
this.items = [];
for (i = 1; i < 100; i++) {
let label = ( "0" + i ).substr(-3);
this.items.push(label);
}
}
render() {
return (
<Container>
<Header>
<Left>
<Button transparent onPress={() => this.props.navigation.goBack()}>
<Icon name='arrow-back' />
</Button>
</Left>
<Body>
<Title>ダイナミック</Title>
</Body>
<Right />
</Header>
<Content>
<List dataArray={this.items}
renderRow={(item) =>
<ListItem>
<Text>{item}</Text>
</ListItem>
}>
</List>
</Content>
</Container>
);
}
}
| iOS | Android |
|---|---|
 |
 |
データをダイナミックに使用して(データが多い場合)
前の方法では行が多くなった場合、著しく動作が遅くなる現象が確認できました。（上記例では100行で問題はありませんでしたが、1000行だと問題が発生しました）
ネイティブアプリでテーブルビューを使用する場合、セルを再利用することにより、パフォーマンスを向上させていますが、上記の基になっていると思われる React Native の ListView ではそういった仕組みはないと思われます。行数が多くなることが予測される場合は、「FlatList」を使用する必要があります。
FlatList.js
import React, {Component} from 'react';
import { FlatList } from "react-native";
import { Container, Header, Left, Body, Right, Title } from 'native-base';
import { Content, ListItem, Text } from 'native-base';
type Props = {};
export default class App extends Component<Props> {
constructor() {
super();
this.items = [];
for (i = 1; i < 1000; i++) {
let key = ( "0" + i ).substr(-3);
item ={key: key, label: "Item" + key}
this.items.push(item);
}
}
renderItem = ({ item }) => {
return (
<ListItem style={{ marginLeft: 0 }}>
<Body>
<Text>{item.label}</Text>
</Body>
</ListItem>
);
};
render() {
return (
<Container>
<Header>
<Left />
<Body>
<Title>FlatList</Title>
</Body>
<Right />
</Header>
<Content>
<FlatList
data={this.items}
renderItem={({item}) =>
<ListItem>
<Text>{item.label}</Text>
</ListItem>
}
keyExtractor={item => item.key}
/>
</Content>
</Container>
);
}
}
動作の例
| iOS | Android |
|---|---|
 |
 |
リポジトリ
本記事で作成したものは以下で公開していますので、参考にしてください。
https://github.com/k-neo/ReactNativeCourseList