【React Native入門】4-2 レイアウトを考える レイアウトのためのコンポーネント

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

目次
[ P.166〜P.168 ] スクロール表示
[ P.168〜P.171 ] Tileによるタイル表示
[ P.171〜P.174 ] Tileにコンテンツを追加する
[ P.174〜P.177 ] WebViewについて　エラーになる

---

[ P.166〜P.168 ] スクロール表示

<ScrollView>
　...スクロール表示する内容...
</ScrollView>

App.js

import React, { Component } from 'react';
import { StyleSheet, Alert, StatusBar, TextInput, ScrollView, Text, View } from 'react-native';
import { Header } from 'react-native-elements';

export default class App extends Component {

  items = ['one','two','three','four','five','six','seven','eight','nine','ten'];

  constructor(props) {
    super(props);
    StatusBar.setBarStyle('light-content', true);
    // StatusBar.setBackgroundColor('#008080', true); // Androidのみ
    this.title = 'Scroll View Layout';
    this.state = {
      message: 'This is ScrollViewLayout.',
    }
  }

  render() {
    return (
      <View style={styles.base}>
        <Header
          leftComponent={{
            icon: 'menu', color: 'white', size: 25,
            onPress: this.doActionLeft
          }}
          centerComponent={{
            text: 'Sample App',
            style: styles.header
          }}
          rightComponent={{
            icon: 'android',
            color: 'white',
            size: 25,
            onPress: this.doActionRight
          }}
          otherContainerStyles={{
            height: 100,
            backgroundColor: '#dd0000'
          }}
          innerContainerStyles={{
            height: 100,
            backgroundColor: '#dd0000'
          }}
        />
          <Text style={ styles.title }>{ this.title }</Text>
          <Text style={ styles.message }>{ this.state.message }</Text>

          <ScrollView style={{flex:1}}>
            { this.items.map((item, i) => this.getView(item, i)) }
          </ScrollView>

      </View>
    );
  }

  getView = (item, i) => (
    <View style={ styles.view }>
      <Text style={{fontSize:36}}>{i}: {item}</Text>
    </View>
  )

  doActionLeft = () => { Alert.alert('Left icon tapped!'); }
  doActionRight = () => { Alert.alert('Right icon tapped!'); }
}

const styles = StyleSheet.create ({
  base: {
    padding: 0, 
    flex:1
  },
  header: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold'
  },
  title: {
    padding: 10,
    color: '#3a3c49',
    fontSize: 25,
  },
  message: {
    padding: 10,
    color: '#3a3c49',
    fontSize: 15,
  },
  view: {
    height: 100,
    margin: 5,
    backgroundColor: '#6666aa',
  },
});

---

[ P.168〜P.171 ] Tileによるタイル表示

<Tile
 featured
 imageSrc=path
 title=タイトル
 caption=キャプション
/>

featured属性を入れると画像内にテキストを挿入可能
またcaptionはfeaturedが入っていないと表示されません。

App.js

import React, { Component } from 'react';
import { StyleSheet, Alert, StatusBar, TextInput, ScrollView, Text, View } from 'react-native';
import { Header, Tile } from 'react-native-elements';

export default class App extends Component {

  items = ['one','two','three','four','five','six','seven','eight','nine','ten'];

  constructor(props) {
    super(props);
    StatusBar.setBarStyle('light-content', true);
    // StatusBar.setBackgroundColor('#008080', true); // Androidのみ
    this.title = 'Tile Layout';
    this.state = {
      message: 'This is TileLayout.',
    }
  }

  render() {
    return (
      <View style={styles.base}>
        <Header
          leftComponent={{
            icon: 'menu', color: 'white', size: 25,
            onPress: this.doActionLeft
          }}
          centerComponent={{
            text: 'Sample App',
            style: styles.header
          }}
          rightComponent={{
            icon: 'android',
            color: 'white',
            size: 25,
            onPress: this.doActionRight
          }}
          otherContainerStyles={{
            height: 100,
            backgroundColor: '#dd0000'
          }}
          innerContainerStyles={{
            height: 100,
            backgroundColor: '#dd0000'
          }}
        />
          <Text style={ styles.title }>{ this.title }</Text>
          <Text style={ styles.message }>{ this.state.message }</Text>

          <ScrollView>
            <Tile
              imageSrc={ require('./assets/image1.jpg') }
              title="This is sample image tile Component"
            />
            <Tile
              featured
              imageSrc={ require('./assets/image2.jpg') }
              title="This is sample image tile Component"
              caption="This is sample Caption"
            />
          </ScrollView>

      </View>
    );
  }

  doActionLeft = () => { Alert.alert('Left icon tapped!'); }
  doActionRight = () => { Alert.alert('Right icon tapped!'); }
}

const styles = StyleSheet.create ({
  base: {
    padding: 0, 
    flex:1
  },
  body: {
    padding: 0, 
    flex:1
  },
  header: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold'
  },
  title: {
    padding: 10,
    color: '#3a3c49',
    fontSize: 25,
  },
  message: {
    padding: 10,
    color: '#3a3c49',
    fontSize: 15,
  },
  view: {
    height: 100,
    margin: 5,
    backgroundColor: '#6666aa',
  },
});

---

[ P.171〜P.174 ] Tileにコンテンツを追加する

 <Tile
...
 icon={{
  name: アイコン名,
  type: 種類,
  size: サイズ,
  color: 色
 }}
...
/>

App.js

import React, { Component } from 'react';
import { StyleSheet, Alert, StatusBar, TextInput, ScrollView, Text, View } from 'react-native';
import { Header, Tile } from 'react-native-elements';

export default class App extends Component {

  items = ['one','two','three','four','five','six','seven','eight','nine','ten'];

  constructor(props) {
    super(props);
    StatusBar.setBarStyle('light-content', true);
    // StatusBar.setBackgroundColor('#008080', true); // Androidのみ
    this.title = 'Tile Layout';
    this.state = {
      message: 'This is TileLayout.',
    }
  }

  render() {
    return (
      <View style={styles.base}>
        <Header
          leftComponent={{
            icon: 'menu', color: 'white', size: 25,
            onPress: this.doActionLeft
          }}
          centerComponent={{
            text: 'Sample App',
            style: styles.header
          }}
          rightComponent={{
            icon: 'android',
            color: 'white',
            size: 25,
            onPress: this.doActionRight
          }}
          otherContainerStyles={{
            height: 100,
            backgroundColor: '#dd0000'
          }}
          innerContainerStyles={{
            height: 100,
            backgroundColor: '#dd0000'
          }}
        />
        <View style={ styles.body }>
          <Text style={ styles.title }>{ this.title }</Text>
          <Text style={ styles.message }>{ this.state.message }</Text>

          <Tile
            imageSrc={ require('./assets/image1.jpg') }
            title="This is sample image tile Component"
            icon={{
              name: 'play-circle',
              type: 'font-awesome',
              size: 50,
              color: 'white'
            }}
            height={350}
            // contentContainerStyle={{ height: 200 }}
          />
          <View style={ styles.tileFooter }>
            <Text style={ styles.tileCaption }>Help</Text>
            <Text style={ styles.tileCaption }>click here!</Text>
          </View>
        </View>

      </View>
    );
  }

  doActionLeft = () => { Alert.alert('Left icon tapped!'); }
  doActionRight = () => { Alert.alert('Right icon tapped!'); }
}

const styles = StyleSheet.create ({
  base: {
    padding: 0, 
    flex:1
  },
  body: {
    padding: 0, 
    flex:1
  },
  header: {
    color: '#fff',
    fontSize: 20,
    fontWeight: 'bold'
  },
  title: {
    padding: 20,
    paddingBottom: 10,
    color: '#3a3c49',
    fontSize: 25,
  },
  message: {
    padding: 20,
    paddingTop: 0,
    color: '#3a3c49',
    fontSize: 15,
  },
  view: {
    height: 100,
    margin: 5,
    backgroundColor: '#6666aa',
  },
  tileFooter: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between'
  },
  tileCaption: {
    padding: 20,
    fontSize: 18 
  },
});