React Native에 이미지 포함

  2. 어떻게
  3. React 방법
  4. React Native에 이미지 포함
MD Aminul Islam 2023년10월12일
React Native React Native Image
React Native에 이미지 포함

앱을 디자인할 때 아이콘과 로고를 사용하여 작업해야 합니다.

이러한 이미지는 다른 형식일 수 있습니다. React-Native에서는 앱에 이미지를 포함하기가 쉽습니다.

이 기사에서는 React-Native 앱에서 이미지를 포함하고 크기를 조정하는 방법을 보여줍니다. 또한 주제를 쉽게 만들기 위해 필요한 예와 설명을 따라 주제에 대해 논의합니다.

React-Native 앱에 이미지를 포함하려면 다음 단계를 따르세요.

  1. react-native 패키지에서 Image를 가져옵니다.

  2. return() 내부에서 다음과 같이 image 태그를 구현합니다.

    <Image
	style={styles.YOUR_ID}
	source={{
	  uri: 'https://yourlink.com/yourImage.jpg',
	}}
  />

  3. 마지막으로 특정 ID를 사용하여 이미지의 스타일(크기)을 지정합니다.

React-Native 앱에 이미지를 포함하는 데 필요한 단계를 논의하면서 더 명확하게 이해할 수 있는 예를 살펴보겠습니다.

React-Native 앱에 이미지 및 크기를 포함하는 예

아래 예제에서는 React-Native 앱에 이미지를 포함하는 방법을 설명했습니다. 예제 코드는 다음과 같습니다.

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

export default function App() {
  return (  // Including the image
    <View style={styles.container}>
      <Text>Simple Image</Text>
      <Image
        style={styles.img}
        source={{
          uri: 'https://st2.depositphotos.com/1031343/6062/v/450/depositphotos_60622807-stock-illustration-keep-it-simple-stamp.jpg',
}
}
/>
      <StatusBar style="auto" / > <
    /View>
  );

}

const styles = StyleSheet.create({ / /
        Providing style.container: {
          flex: 1,
          backgroundColor: '#fff',
          alignItems: 'center',
          justifyContent: 'center',
        },
    img: {
      width: 100,
      height: 100,
      resizeMode: 'contain',
    },
});

예제에서 위에서 공유한 단계와 관련하여 필요한 모든 줄의 목적은 주석으로 남습니다. 이제 앱을 실행하면 화면에 아래와 같은 출력이 표시됩니다.

리액트 이미지

위에서 공유한 코드는 React-Native에서 생성되었으며 Expo-CLI를 사용하여 앱을 실행했습니다.

작가: MD Aminul Islam
MD Aminul Islam avatar MD Aminul Islam avatar

Aminul Is an Expert Technical Writer and Full-Stack Developer. He has hands-on working experience on numerous Developer Platforms and SAAS startups. He is highly skilled in numerous Programming languages and Frameworks. He can write professional technical articles like Reviews, Programming, Documentation, SOP, User manual, Whitepaper, etc.

LinkedIn

관련 문장 - React Native

관련 문장 - React Native Image