Card の利用方法

Card (カード) コンポーネントは、見出し、画像、概要を表示し、詳細表示への入り口となる便利なコンポーネントです。

マテリアルデザインでも大事な役割を果たしていて、主要なアプリケーションでも頻繁に活用されています。

React Native Elements でも Card コンポーネントはサポートされていて、カード UI は簡単に利用できます。

さらにカードに組み合わせて、ボタンなども簡単に配置できるのでとても使い勝手が良いです。

ここでは次のような UI を作ります。

複数のカードがあって縦に長くても切れることなく、全体がスクロールできるように、ScrollView を使います。これは React Native Elements ではなく、React Native のコアに含まれるビューです。

またボタンをタップしたときにブラウザを開くために Linking を使っています。

Card の実装

Card の実装は簡単です。

上記のプログラムのコードは次の通りです。Card コンポーネントを利用しています。また、全体をスクロールさせるために ScrollView を利用していることにも注意してください。

import React, { Component } from 'react';
import { AppRegistry, View, ScrollView, Text, Linking, Alert } from 'react-native';
import { Button, Card } from 'react-native-elements';

export default class myapp2 extends Component {
  render() {
    return (
      <ScrollView style={{flex: 1}}>
        <Card
          title='ARDUINO'
          image={require('./images/image1.jpg')}>
          <Text style={{marginBottom:10}}>I'm going to explain how to develop a mobile app to communicate with Bluetooth on an Arduino board...</Text>
          <View style={{flexDirection:'row', justifyContent:'flex-start'}}>
          <Button
            style={{width:30}}
            backgroundColor='white'
            color='#E91E63'
            title='READ MORE'
            onPress={()=>{this.openUrl('http://iot.keicode.com/arduino/bluetooth-android.php')}}
          />
          <Button
            style={{width:30}}
            backgroundColor='white'
            color='#E91E63'
            title='SHARE'
            onPress={()=>{Alert.alert('Hello!')}}
          />
          </View>
        </Card>

        <Card
          image={require('./images/image2.jpg')}>
          <Text style={{fontSize:28,marginBottom:10}}>GPS</Text>
          <Text style={{marginBottom:10}}>This is how to put a button in a Card component.</Text>
          <Button
            icon={{name: 'open-in-browser'}}
            backgroundColor='#FF5722'
            title='READ MORE'
            onPress={()=>{this.openUrl('http://iot.keicode.com/electronics/gps-serial-port.php')}}
          />
        </Card>

      </ScrollView>
    );
  }

  openUrl(url){
    Linking.canOpenURL(url).then(supported => {
      if (!supported) {
        console.log('Can\'t handle url: ' + url);
      } else {
        return Linking.openURL(url);
      }
    }).catch(err => console.error('An error occurred', err));
  }
}

AppRegistry.registerComponent('myapp2', () => myapp2);

画像は images というディレクトリに次のファイルを image1.jpg、image2.jpg として保存しています。画像1 | 画像2

ボタン (リンク) をタップしたときにブラウザを開き、ウェブサイトを表示していますが、これには React Native の Linking を利用しています。

canOpenURL はプロミスを返すので、then と catch で続けています。

then では渡した URL をシステムが処理可能かどうかを示す値 (supported) が返るので、処理可能な場合は openURL でそれを開きます。

また、ひとつめのカード内ではボタン二つ ( "READ MORE" と "SHARE" ) を横に並べています。

横に左詰めで並べるために、それらをラップする View 要素で flexDirection を row に、 justifyContent を flex-start に、それぞれ指定しています。