react-nativeで星型とか、三角形とか、吹き出しとか出したくなった

すごく綺麗にまとめている人がいるのでこちらを参考にやっていって、疑問が出たら調べるのが一番かと。

http://browniefed.com/blog/the-shapes-of-react-native/

まぁ簡単に言うと、CSS3と同じ様に実装ができる。とはいえCSS3は初めてなので、補足知識を以下にまとめていく。

３角形の作り方

ネットにはたくさん良いコンテンツがあるんですね〜。ここに関してはここにたくさん解説がでている。

星型

この辺までくると、css3のpositionの概念の理解が必須になってくる。ここが割とまとまっている。

コード全体

react-native init StylePlaygroundして、index.ios.jsをこれに書きかえれば、楕円、三角、逆三角、矢印、星型までは見れるはず。

/**
 * Sample React Native App
 * https://github.com/facebook/react-native
 * @flow
 */

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  ScrollView,
} from 'react-native';

export default class StylePlayground extends Component {

  renderOval() {
    return <View style={[styles.oval, styles.base]}/>
  }

  renderTrianglePortrait() {
    return <View style= {[styles.triangle, styles.base ]}/>
  }

  renderTriangleOddPortrait() {
    return <View style= {[styles.triangle, styles.base, { transform: [{ rotate: '180deg' }]} ]}/>
  }

  renderCurverdTailArrow() {
    return (
      <View style={styles.curvedTailArrow}>
        <View style={styles.curvedTailArrowTail}></View>
        <View style={styles.curvedTailArrowTriangle}></View>
      </View>
    );
  }

  renderStarFive() {
    return (
      <View style={styles.starfive}>
        <View style={[styles.triangle, styles.base, styles.startfiveTop]}></View>
        <View style={styles.starfiveBefore}/>
        <View style={styles.starfiveAfter}/>
      </View>
    );
  }

  render() {
    return (
      <ScrollView contentContainerStyle={styles.container}>
        { this.renderOval() }
        { this.renderTrianglePortrait() }
        { this.renderTriangleOddPortrait() }
        { this.renderCurverdTailArrow() }
        { this.renderStarFive() }
      </ScrollView>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'transparent',
  },
  base: {
    margin: 10,
  },
  oval: {
    width: 100,
    height: 100,
    borderRadius: 50,
    backgroundColor: 'gray',
    transform: [
      {scaleX: 2}
    ],
  },
  triangle: {
    width: 0,
    height: 0,
    backgroundColor: 'transparent',
    borderStyle: 'solid',
    borderLeftWidth: 50,
    borderRightWidth: 50,
    borderBottomWidth: 100,
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomColor: 'gray',
  },
  curvedTailArrow: {
    backgroundColor: 'transparent',
    overflow: 'visible',
    width: 30,
    height: 25,
  },
  curvedTailArrowTriangle: {
    backgroundColor: 'transparent',
    width: 0,
    height: 0,
    borderTopWidth: 9,
    borderTopColor: 'transparent',
    borderRightWidth: 9,
    borderRightColor: 'red',
    borderStyle: 'solid',
    transform: [
      {rotate: '10deg'}
    ],
    position: 'absolute',
    bottom: 9,
    right: 3,
    overflow: 'visible',
  },
  curvedTailArrowTail: {
    backgroundColor: 'transparent',
    position: 'absolute',
    borderBottomColor: 'transparent',
    borderLeftColor: 'transparent',
    borderRightColor: 'transparent',
    borderBottomWidth: 0,
    borderLeftWidth: 0,
    borderRightWidth: 0,
    borderTopWidth: 3,
    borderTopColor: 'red',
    borderStyle: 'solid',
    borderTopLeftRadius: 12,
    top: 1,
    left: 0,
    width: 20,
    height: 20,
    transform: [
      {rotate: '45deg'}
    ]
  },
  startfive: {
    width: 150,
    height: 150,
  },
  startfiveTop: {
    position: 'absolute',
    top: -45,
    left: 37,
  },
  starfiveBefore: {
    backgroundColor: 'transparent',
    position: 'absolute',
    left: 0,
    top: 0,
    borderStyle: 'solid',
    borderRightWidth: 100,
    borderRightColor: 'transparent',
    borderBottomWidth: 70,
    borderBottomColor: 'red',
    borderLeftWidth: 100,
    borderLeftColor: 'transparent',
    transform: [
      { rotate: '35deg'}
    ]
  },
  starfiveAfter: {
    backgroundColor: 'transparent',
    position: 'absolute',
    top: 0,
    left: -25,
    width: 0,
    height: 0,
    borderStyle: 'solid',
    borderRightWidth: 100,
    borderRightColor: 'transparent',
    borderBottomWidth: 70,
    borderBottomColor: 'red',
    borderLeftWidth: 100,
    borderLeftColor: 'transparent',
    transform: [
      { rotate: '-35deg'}
    ],
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

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

続きはまた自由研究が進んだら。