[React-Native] 리액트 네이티브 텍스트 (Text) 요소

React, React-Native

[React-Native] 리액트 네이티브 텍스트 (Text) 요소

ITSkeleton 2020. 7. 4. 03:54

728x90

<span> <p> 와 같은 역할이라 볼 수 있는 <Text>에 대하여 알아봅시다

바로 코드로 알아보죠

const styles = StyleSheet.create({
  mainText: {
    fontFamily: "Cochin"
  },
  titleText: {
    fontSize: 20,
    fontWeight: "bold"
  }
});

const TextInANest = () => {
  const titleText = useState("Bird's Nest");
  const bodyText = useState("This is not really a bird nest.");

  return (
    <Text style={styles.mainText}>
      <Text style={styles.titleText}>
        {titleText}
        {"\n"}
        {"\n"}
      </Text>
      <Text>{bodyText}</Text>
    </Text>
  );
};

위와 같이 사용이 가능합니다.

위의 styles를 통하여 스타일을 정의하고 render하면서 스타일을 적용시킨뒤 글을 표시합니다.

텍스트는 이렇게 표시가 됩니다.

텍스트의 레퍼런스를 알아봅시다

accessibilityHint

접근성 힌트는 접근성 레이블에서 결과가 명확하지 않은 경우 접근성 요소에 대한 작업을 수행 할 때 발생하는 상황을 사용자가 이해하도록 도와줍니다.

유형: Boolean

필수 아님

accessibilityLabel

사용자가 요소와 상호 작용할 때 스크린 리더가 읽는 텍스트를 재정의합니다. 기본적으로 레이블은 모든 하위를 순회 Text하고 공간으로 구분 된 모든 노드를 누적하여 구성됩니다 .

accessibilityRole

화면 판독기에 현재 초점을 맞춘 요소를 특정 역할을 가진 것으로 취급하도록 지시합니다.

가능한 값 AccessibilityRole은 다음 중 하나입니다.

'none' -요소가 역할이 없습니다.
'button' -요소는 버튼으로 취급해야합니다.
'link' -요소는 링크로 취급되어야합니다.
'header' -요소는 콘텐츠를 섹션으로 나누는 헤더입니다.
'search' -요소는 검색 필드로 취급해야합니다.
'image' -요소는 이미지로 취급되어야합니다.
'key' -요소는 키보드 키처럼 취급해야합니다.
'text' -요소는 텍스트로 취급해야합니다.
'summary' -요소는 앱 요약 정보를 제공합니다.
'imagebutton' -요소는 이미지와 버튼의 역할을 모두 수행합니다.
'adjustable' -이 요소는 다양한 값을 조정할 수 있습니다.

iOS에서 이러한 역할은 해당 접근성 특성에 맵핑됩니다. 이미지 버튼은 특성이 '이미지'와 '버튼'으로 설정되어있는 것과 동일한 기능을합니다. 자세한 내용은 접근성 안내서 를 참조하십시오.

Android에서 이러한 역할은 iOS의 Voiceover에서 접근성 속성을 추가 할 때와 마찬가지로 TalkBack에서 유사한 기능을 수행합니다.

accessibilityState

화면 판독기에 현재 초점을 맞춘 요소를 특정 상태로 취급하도록 지시합니다.

하나의 상태, 비 상태 또는 여러 상태를 제공 할 수 있습니다. 상태는 객체를 통해 전달되어야합니다. 예 : {selected: true, disabled: true}.

가능한 값 AccessibilityState은 다음과 같습니다.

'selected' -요소가 선택된 상태입니다.
'disabled' -요소가 비활성화 된 상태입니다.

accessible

로 설정 true하면보기가 내게 필요한 옵션 요소임을 나타냅니다. Text요소 의 기본값 은 true입니다.

자세한 내용은 접근성 안내서 를 참조하십시오.

adjustsFontSizeToFit

지정된 스타일 제약 조건에 맞게 글꼴을 자동으로 축소해야하는지 여부를 지정합니다.

allowFontScaling

텍스트 크기 접근성 설정을 고려하여 글꼴 크기를 조정할지 여부를 지정합니다. 기본값은 true입니다.

dataDetectorType

텍스트 요소에서 클릭 가능한 URL로 변환 된 데이터 유형을 결정합니다. 기본적으로 데이터 유형이 감지되지 않습니다.

하나의 유형 만 제공 할 수 있습니다.

가능한 값 dataDetectorType은 다음과 같습니다.

'phoneNumber'
'link'
'email'
'none'
'all'

disabled

테스트 목적으로 텍스트보기의 비활성화 된 상태를 지정합니다.

ellipsizeMode

때 numberOfLines설정이 소품을 정의는 텍스트가 어떻게 잘립니다. numberOfLines이 소품과 함께 설정해야합니다.

다음 값 중 하나 일 수 있습니다.

head-줄이 컨테이너에 맞게 표시되고 줄의 시작 부분에 누락 된 텍스트가 줄임표로 표시됩니다. 예 : "... wxyz"
middle-컨테이너에 시작과 끝이 맞도록 줄이 표시되고 가운데에 누락 된 텍스트가 줄임표로 표시됩니다. "ab ... yz"
tail-줄이 컨테이너에 시작되도록 표시되고 줄 끝에 누락 된 텍스트는 줄임표로 표시됩니다. 예 : "abcd ..."
clip -텍스트 컨테이너의 가장자리를지나 선이 그려지지 않습니다.

기본값은 tail입니다.

maxFontSizeMultiplier

사용 가능한 경우 글꼴이 도달 할 수있는 가장 큰 배율을 지정합니다 allowFontScaling. 가능한 값 :

null/undefined (기본값) : 부모 노드 또는 전역 기본값 (0)에서 상속
0: 최대 값 없음, 상위 / 전역 기본값 무시
>= 1: maxFontSizeMultiplier이 노드의 값을이 값으로 설정합니다

minimumFontScale

adjustsFontSizeToFit가 활성화 된 경우 글꼴이 도달 할 수있는 가장 작은 배율을 지정합니다. (값 0.01-1.0).

nativeID

기본 코드에서이보기를 찾는 데 사용됩니다.

numberOfLines

줄 바꿈을 포함하여 텍스트 레이아웃을 계산 한 후 줄을 포함하여 텍스트를 줄임표로 잘라서 총 줄 수가이 수를 초과하지 않도록합니다.

이 소품은 일반적으로와 함께 사용됩니다 ellipsizeMode.

onLayout

마운트 및 레이아웃 변경시 호출

{nativeEvent: {layout: {x, y, width, height}}}

onLongPress

이 기능은 길게 누르면 호출됩니다.

예를 들어 onLongPress={this.increaseSize}>

onMoveShouldSetResponder

이보기가 터치 반응을 "고발"하고 싶습니까? View응답자가 아닌 경우의 모든 터치 이동에 대해 호출됩니다 .

View.props.onMoveShouldSetResponder: (event) => [true | false]여기서, event전술 한 바와 같은 합성 터치 이벤트가있다.

onPress

이 기능은 언론에서 호출됩니다.

예를 들어 onPress={() => console.log('1st')}

onResponderGrant

보기가 터치 이벤트에 응답하고 있습니다. 사용자에게 무슨 일이 일어나고 있는지 강조하고 보여줄 때입니다.

View.props.onResponderGrant: (event) => {}여기서, event전술 한 바와 같은 합성 터치 이벤트가있다.

onResponderMove

사용자가 손가락을 움직이고 있습니다.

View.props.onResponderMove: (event) => {}여기서, event전술 한 바와 같은 합성 터치 이벤트가있다.

onResponderRelease

터치가 끝날 때 발사됩니다.

View.props.onResponderRelease: (event) => {}여기서, event전술 한 바와 같은 합성 터치 이벤트가있다.

onResponderTerminate

응답자가에서 가져 왔습니다 View. 을 호출 한 후 다른보기에서 가져 onResponderTerminationRequest오거나 묻지 않고 OS에서 발생할 수 있습니다 (예 : iOS의 제어 센터 / 알림 센터에서 발생)

View.props.onResponderTerminate: (event) => {}여기서, event전술 한 바와 같은 합성 터치 이벤트가있다.

onResponderTerminationRequest

다른 사람들 View은 응답자가되고 싶어하며 응답자 View를 풀 도록 요청합니다 . 돌아 오면 true릴리스 할 수 있습니다.

View.props.onResponderTerminationRequest: (event) => {}여기서, event전술 한 바와 같은 합성 터치 이벤트가있다.

onStartShouldSetResponderCapture

부모 View가 자식 View이 터치 스타트에서 응답 하지 못하도록하려면 이 핸들러가 있어야합니다 true.

View.props.onStartShouldSetResponderCapture: (event) => [true | false]여기서, event전술 한 바와 같은 합성 터치 이벤트가있다.

onTextLayout

텍스트 레이아웃에서 호출

pressRetentionOffset

스크롤보기가 비활성화되면 버튼을 비활성화하기 전에 터치가 버튼에서 멀어 질 수있는 거리를 정의합니다. 비활성화되면 버튼을 뒤로 이동하면 버튼이 다시 활성화 된 것을 볼 수 있습니다! 스크롤보기가 비활성화 된 상태에서 앞뒤로 여러 번 이동하십시오. 메모리 할당을 줄이려면 상수를 전달해야합니다.

selectable

기본 복사 및 붙여 넣기 기능을 사용하기 위해 사용자가 텍스트를 선택할 수 있습니다.

selectionColor

텍스트의 강조 색상입니다.

suppressHighlighting

때 true, 텍스트가 아래로 눌렀을 때 시각적 변경이되지 않습니다. 기본적으로 회색 타원은 아래로 누를 때 텍스트를 강조 표시합니다.

testID

종단 간 테스트에서이보기를 찾는 데 사용됩니다.

textBreakStrategy

안드로이드 API 레벨 23+에 설정 텍스트 휴식 전략은 가능한 값은 simple, highQuality, balanced기본값입니다 highQuality.

https://reactnative.dev/docs/text

React Native · A framework for building native apps using React

A framework for building native apps using React

reactnative.dev

리엑트 문서를 보시면 더 자세한 레퍼런스를 확인할 수 있습니다.

728x90

현재글[React-Native] 리액트 네이티브 텍스트 (Text) 요소

Skeleton의 세상