• https://reactnative.dev/docs/0.74/components-and-apis
• 참고로 scss, css 는 사용하지 않음.
• emotion 은 별도로 적용해야 한다.

npm start

a

View

• html 의 div 의 역할을 수행.
• View 는 css 로 모양, 넓이, 등등을 셋팅
• View 는 옵션으로 style 이 있음.
• 아래는 인라인 스타일

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

const AboutScreen = (): JSX.Element => {
  return (
    <SafeAreaView style={styles.container}>
      <Viewstyle={{
          padding: 20,
          backgroundColor: 'skyblue',
          margin: 10,
          borderWidth: 2,
          borderRadius: 10,
          borderColor: 'black',
          width: 100,
          height: 200,
        }}/>
    </SafeAreaView>);
};
// css
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
});
export default AboutScreen;

• 아래는 객체 변수 정의 스타일

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

const AboutScreen = (): JSX.Element => {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.viewStyle} />
    </SafeAreaView>);
};
// css
const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'white',
  },
  viewStyle: {
    padding: 20,
    backgroundColor: 'skyblue',
    margin: 10,
    borderWidth: 2,
    borderRadius: 10,
    borderColor: 'black',
    width: 100,
    height: 200,
  },
});
export default AboutScreen;

• 일반적인 구성 : flex 를 많이 활용한다.

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

const AboutScreen = (): JSX.Element => {
  return (
    <SafeAreaView style={styles.container}>
      <View style={styles.viewStyle}>
        <Text>Hello</Text>
      </View>
    </SafeAreaView>);
};
// css
const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  viewStyle: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'skyblue',
  },
  viewStyle2: {
    flex: 1,
    backgroundColor: 'orange',
  },
});
export default AboutScreen;

Text

• numberOfLines : 글의 행수
• ellipsizeMode : 말줄임 표현 (기본 tail)
• ellipsizeMode 는 numberOfLines 이 1인 경우 잘 작동함.
• ellipsizeMode 는 numberOfLines 이 2이상의 경우 tail.