Chapter 05

Image / 画像の表示

knaka Tech-Blog
knaka Tech-Blog
2021.11.22に更新
このチャプターの目次

概要

React Native , image /画像の表示になります。


構成

react-native: 0.64.3


関連

https://reactnative.dev/docs/image

画面


  • コード
ImageScreen.tsx
import React, { useState } from 'react';
import {
  StyleSheet,
  KeyboardAvoidingView,
  Text,
  View,
  Image,
  AsyncStorage ,
  Platform,
} from 'react-native';

  render(){
//console.log("id=", this.state.id );
    return (
      <View style={styles.container}>
        <Text style={[styles.text_base, styles.text_top]}>Welcome, Test</Text>
        <Text style={[styles.text_base, { marginBottom: 0 }]}
        >img1:</Text>
        <Image
        style={styles.tinyLogo}
        source={{  uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        />
        <Text style={[styles.text_base, { marginBottom: 0 }]}
        >img2:</Text>
        <Image
        style={styles.tinyLogo}
        source={{  uri: 'https://reactnative.dev/img/tiny_logo.png' }}
        />
      </View>
    )
  }
  
  const styles = StyleSheet.create({
  container: {
    flex: 1,
    padding: 16,
  },
  tinyLogo: {
    width: 50,
    height: 50,
  },
  logo: {
    width: 66,
    height: 58,
  },
  text_base: {
    fontSize: 24,
  },
  text_top: {
    color: '#00FF00',
    fontSize: 24,
  }
});