React Nativeでアプリの画面を作ろう（画像貼る）

はじめに

React Nativeのローカル環境ができたばかりで何していいかわからないから
とにかく触ってみよう。
画像を貼ってみる。

おさらい。Expoを起動する

プロンプトを起動。
アプリ（MyApp）を保管しているディレクトリ（C:\Users\watya\myApp）へ移動して、expo起動

cd C:\Users\watya\myApp
expo start

画像を貼るならImageタグ

imageタグを使いたいならまずは、importにimageを追記。

import { StyleSheet, Text, View, Image } from 'react-native';

で、Imageタグを使う。

を参考に。

import { StatusBar } from 'expo-status-bar';
import { StyleSheet, Text, View, Image } from 'react-native';

export default function App() {
  return (
    <View style={styles.container}>
        <View style={styles.itemContainer}>
          <View style={styles.leftContainer}>
            <Image
              style={{ width: 100, height: 100}}
              source={{uri: 'https://1.bp.blogspot.com/-ZOg0qAG4ewU/Xub_uw6q0DI/AAAAAAABZio/MshyuVBpHUgaOKJtL47LmVkCf5Vge6MQQCNcBGAsYHQ/s1600/pose_pien_uruuru_woman.png'}} />
          </View>
          <View style={styles.rightContainer} />
        </View>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
  itemContainer: {
    height: 100,
    width: "100%",
    borderColor: "gray",
    borderWidth: 1,
    flexDirection: "row"
  },
  leftContainer: {
    backgroundColor: "red",
    width: 100
  },
  leftContainer: {
    backgroundColor: "blue",
    flex:1
  },
});

できた。