概要
React Native , image /画像の表示になります。
構成
react-native: 0.64.3
関連
画面
- コード
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,
}
});