[React Native] Text

Text 컴포넌트

기본

---

코드

import React from 'react';
import { Text } from 'react-native';

const App = () => {
  return (
    <Text>Hello world</Text>
  );
}

export default App;

실행결과

노치 때문에 화면 좌측 상단에 Hello world가 잘려서 보입니다.

노치디자인 문제 해결

SafeAreaView 사용

코드

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

const App = () => {
  return (
    <SafeAreaView>
      <Text>Hello world</Text>
    </SafeAreaView>
  );
}

export default App;

실행결과