[React Native] 텍스트, 이미지, 텍스트 입력창 삽입

1. 텍스트 삽입

---

 app-folder > App.js

 

react-native에서 Text를 임포트한다.

<Text> 내부에 문자열을 입력하면 화면에 출력된다.

 

• fontSize : 텍스트 크기
• color: 텍스트 색상

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

export default function App() {
  return (
    <View style={styles.container}>
      // 텍스트 삽입
      <Text>Hello, World</Text>
      <Text style={{fontSize:20, color:"blue"}}>Hello, World</Text>
    </View>
  );
}

 

 

 

2. 이미지 삽입

---

react-native에서 Image를 임포트한다.

이미지는 파일에서 불러오기(require) 또는 웹 주소로 불러오기(uri) 두 가지 방법이 있다.

 

• require : 로컬 프로젝트 안의 이미지 파일을 가져올 때 사용 (파일 없으면 에러 발생)
• uri : 외부 URL에서 이미지를 불러올 때 사용

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

export default function App() {
  return (
    <View style={styles.container}>
      // 로컬 이미지 삽입
      <Image source={require('./cat-icon.jpg')} />
      
      // 웹 이미지 삽입
      <Image source={{uri: 'https://reactnative.dev/docs/assets/p_cat2.png'}} />
    </View>
  );
}

 

 

 

3. 텍스트 입력창 삽입

---

react-native에서 TextInput를 임포트한다.

사용자로부터 입력을 받고 싶은 곳에 <TextInput> 컴포넌트를 넣는다.

 

• placeholder : 입력 전 표시되는 안내 문구
• secureTextEntry : 비밀번호 입력 시 글자를 숨김 처리

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

export default function App() {
  return (
    <View style={styles.container}>
      // 기본 입력창
      <TextInput style={styles.input} placeholder="이름을 입력하세요"/>

      // 비밀번호 입력창
      <TextInput 
        style={styles.input} 
        placeholder="비밀번호" 
        secureTextEntry={true} 
      />
    </View>
  );
}