makiintro.js

// <-- スラッシュを二つ打てば、そのあとのテキストはコードとして解釈されないから、メモやコメントが書ける

// この一行は必須
import React, { Component } from 'react'

// ここで利用するパーツをリストアップする
import { StyleSheet, Text, View, Image } from 'react-native'

// 新しいパーツを作って、Appという名前をつける
export default class App extends Component {
  // 画面を描写する関数。全てのパーツはこの関数が必須
  // 注意： render() の中ではコメントが書けない
  render() {
    return (
      <View style={styles.container}>
        <Text style={styles.welcome}>こころちゃんの好きなアイス</Text>

        <Text style={styles.instructions}>キンキン冷えているが一番おいしい！</Text>

        <View style={styles.tate}>
          <Image
            style={styles.image}
            source={{
              uri: 'https://www.haagendazs.us/media/1068/icecream.jpg'
            }}
          />
          <Image
            style={styles.image}
            source={{
              uri:
                'https://www.haagendazs.us/Images/products/thumbs/fl_IceCream_JavaChip.jpg'
            }}
          />
        </View>

        <View style={styles.yoko}>
          <Image
            style={styles.image}
            source={{
              uri: 'https://www.haagendazs.us/media/1068/icecream.jpg'
            }}
          />
          <Image
            style={styles.image}
            source={{
              uri:
                'https://www.haagendazs.us/Images/products/thumbs/fl_IceCream_JavaChip.jpg'
            }}
          />
        </View>
      </View>
    )
  }
}

// それぞれのパーツのスタイルを定義する
const styles = StyleSheet.create({
  // 画面全体が入っている一番大きな長方形
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF'
  },

  // 一行目の大きめのテキスト
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10 // 周りのパーツと10画素分のスペースを開ける
  },

  // 二行目のやや小さなテキスト
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5 // 下のパーツと５画素分のスペースを開ける
  },

  // 画像のスタイル
  image: {
    margin: 10, // くっ付かないように、ちょっとスペースを開けとく
    height: 100, // 高さ
    width: 100 // 幅
  },

  // 入れるパーツが横に並ぶ長方形
  yoko: {
    flexDirection: 'row', // 中身を行に並べる
    backgroundColor: 'orange' // 背景色を指定
  },

  // 入れるパーツが縦に並ぶ長方形
  tate: {
    flexDirection: 'column', // 中身を列に並べる
    backgroundColor: 'purple' // 背景色を指定
  }
})