12. React-Native Text, TextInput, TouchableOpacity

1. Text

Text는 텍스트를 표현하기 위한 컴포넌트이다.

React-Native에서 기본적으로 제공하는 컴포넌트에서는 Text와 TextInput을 사용해야지 텍스트를 삽입 가능하기 때문에 필수적인 컴포넌트 중 하나이다.

—Example

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.baseText}>
        I am bold
        <Text style={styles.innerText}> and red</Text>
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  baseText: {
    fontWeight: 'bold',
    fontSize: 40
  },
  innerText: {
    color: 'red'
  }
});

export default App;

→ baseText안에 innerText가 들어가 있는 상태이다.

→ innerText는 baseText의 속성에 innerText의 속성이 추가되어서 표현된다.

—Example2

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

const App = () => {
  return (
    <View style={styles.container}>
      <Text style={styles.text}>
        개발새발 개발개발 블로그 <Image style={styles.image1} source={require('./assets/crab.png')} />
      </Text>
      <Text style={styles.text}>
      개발새발 개발개발 블로그 <Image style={styles.image2} source={require('./assets/crab.png')} />
      </Text>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center'
  },
  image1: {
    width: 20,
    height: 20,
  },
  image2: {
    width:20,
    height: 20,
    marginLeft: 10
  },
  text: {
    fontSize: 30,

  }
});

export default App;

→ Text컴포넌트 안에 이미지를 주되 하나는 레이아웃 속성을 넣었다.

→ 레이아웃을 준 이미지는 깨지는 것을 확인할 수 있다.

💡

Text 내부에 외부 컴포넌트를 사용할 수 있지만 제약되는 속성이 있으니 주의하면서 사용해야한다.

알면 유용한 속성들

• numberOfLines : 정수 타입 속성이며 총 줄 수가 n개를 초과하지 않도록 해주는 속성이다.

---

TextInput

React Native에서 텍스트를 입력하는 공간이다.

—Example

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

const App = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  return (
    <SafeAreaView style={styles.container}>
      <TextInput style={styles.textInput}
        placeholder = "Email"
        placeholderTextColor = "#9a73ef"
        onChangeText={text => setEmail(text)} value={email} />
      <TextInput style={styles.textInput}
        placeholder = "Password"
        placeholderTextColor = "#9a73ef"
        onChangeText={text => setPassword(text)} value={password} />
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  
  textInput: {
    margin: 15,
    height: 40,
    borderColor: '#7a42f4',
    borderWidth: 1
  }
});

export default App;

→ 리액트 훅을 이용해서 값이 email, password의 값을 textInput으로 받고 값이 바뀌면 TextInput의 value가 바뀐다.

—자주 쓰는 속성

• placehorder={string} : placehorder 값을 string으로 지정해준다.

• onChangeText={function} : TextInput 박스에 값이 들어오면 function을 실행

• maxLength={Number} : 입력할 수 있는 최대 문자 수를 Number로 제한

• multiline : TextInput을 여러줄로 사용할 수 있게 해준다.

• numberOfLines={Number} : TextInput의 라인 수를 Number로 정해준다.

• textAlign : 텍스트 정렬('left', 'center', 'right')

---

3. TouchableOpacity

해당 컴포넌트안에 감싸져 있는 컴포넌트에 터치 이벤트를 추가해주는 컴포넌트이다.

—Example

const App = () => {
  const [count, setCount] = useState(0);
  const onPress = () => setCount(prevCount => prevCount + 1);

  return (
    <View style={styles.container}>
      <View style={styles.countContainer}>
        <Text>Count: {count}</Text>
      </View>
      <TouchableOpacity
        style={styles.button}
        onPress={onPress}
      >
        <Text>Press Here</Text>
      </TouchableOpacity>
    </View>
  );
};

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: "center",
    paddingHorizontal: 10
  },
  button: {
    alignItems: "center",
    backgroundColor: "#DDDDDD",
    padding: 10
  },
  countContainer: {
    alignItems: "center",
    padding: 10
  }
});

export default App;

→ 원래 Text 컴포넌트는 터치이벤트가 없지만 TouchableOpacity컴포넌트 안에 있어서 터치가 가능하다.

→ useState Hook을 사용하여 터치 이벤트가 발생하면 count의 값이 오르는 코드이다.

—속성 목록

• activeOpacity:{float} : 터치가 활성화 되면 컴포넌트의 불투명도를 알려준다.

  0~ 1값을 사용하고 기본값은 0.2이다.

• onPress:{function} : 터치 이벤트 발생시 function을 실행한다.

—Method

setOpacityTo((value: number), (duration: number));
//value : 원하는 불투명도, duration : 원하는 시간(1000 = 1초)

→ 컴포넌트의 불투명도를 애니메이션으로 보여주는 함수이다.

---

실습

회원가입 창 코드

import React, {useState} from 'react';
import {View, StyleSheet, TextInput, SafeAreaView, TouchableOpacity, Text} from 'react-native';

const App = () => {
  const [email, setEmail] = useState('')
  const [password, setPassword] = useState('')
  const login = (email, password) => {
    alert(`email: ${email} password: ${password}`);
  }
  return (
    <SafeAreaView style={styles.container}>
      <TextInput style={styles.textInput}
        placeholder = "Email"
        placeholderTextColor = "#9a73ef"
        onChangeText={text => setEmail(text)} value={email} />
      <TextInput style={styles.textInput}
        placeholder = "Password"
        placeholderTextColor = "#9a73ef"
        onChangeText={text => setPassword(text)} value={password} />
      <TouchableOpacity
        style= {styles.submitButton}
        onPress = {
          () => login(email, password)
        }>
          <Text style = {styles.submitButtonText}>Submit</Text>
        </TouchableOpacity>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  
  textInput: {
    margin: 15,
    height: 40,
    borderColor: '#7a42f4',
    borderWidth: 1
  },
  submitButton: {
    backgroundColor: '#7a42f4',
    padding: 10,
    margin: 15,
    height: 40
  },
  submitButtonText: {
    color: 'white'
  }
});

export default App;

구현화면

Uploaded by Notion2Tistory v1.1.0