JSX 문법 View,Text,Scroll

View 태그

--> 화면의 영역을 잡아주는 태그

예시)

import { StatusBar } from 'expo-status-bar';
import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
  return (
  
    <View style={styles.container}>
      <View style={styles.subContainerOne}></View>
      <View style={styles.subContainerTwo}></View>
    </View>
    
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  subContainerOne: {
    flex:1,
    backgroundColor:"yellow"
  },
  subContainerTwo: {
    flex:1,
    backgroundColor:"green"
  }
});

--> 위 코드의 아래부분에 styles 를 통해 영역을 잡고 색을 칠한 것

--> View태그는 style 태그를 통해 영역을 잡고 색을 칠해줄 수 있음
위 코드의 예) View태그 안쪽에 style태그
<View style={styles.container}>


<View style={styles.subContainerOne}></View>


<View style={styles.subContainerTwo}></View>


</View>

--> View 태그에는 직접적으로 문자를 쓸 수 없음 --> Text 태그 필요

Text 태그

예시)

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

export default function App() {
  return (

      <View style={styles.container}>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      <Text>문자는 Text 태그 사이에 작성!!</Text>
      </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
    alignItems: 'center',
    justifyContent: 'center',
  },
});

ScrollView 만들기

예시)

1) 스크롤 뷰 없는 기본 코드

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

export default function App() {
return (

//각 태그들에는 style이라는 속성을 갖습니다.
//이 속성은 파일 최하단에 작성한 스타일 코드 객체의 키 값을 부여해
// 엘리먼트들에 스타일을 줄 수 있습니다.
//이는 JSX문법을 배우고 난 다음 더 자세히 다룹니다.

<View style={styles.container}>
                    {/* //보인 영역을 갖는 엘리먼트 7가 반복적으로 쓰였습니다. */}

  <View style={styles.textContainer}>
    <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
  </View>
  <View style={styles.textContainer}>
    <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
  </View>
  <View style={styles.textContainer}>
    <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
  </View>
  <View style={styles.textContainer}>
    <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
  </View>
  <View style={styles.textContainer}>
    <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
  </View>
  <View style={styles.textContainer}>
    <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
  </View>
  <View style={styles.textContainer}>
    <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
  </View>
</View>

);
}

//엑스트가 영역을 갖고, 가운데 정렬도 하며, 테두리 스타일을 갖게 끔 하는 코드입니다.
//JSX를 마저 배우고 스타일에 대해 자세히 다루니
//걱정 안해도 좋습니다!

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
textContainer: {
height:100,
borderColor:'#000',
borderWidth:1,
borderRadius:10,
margin:10,
},
textStyle: {
textAlign:"center"
}
});

2) 스크롤 뷰 추가

--> 화면에 넘치는 내용을 스크롤로 볼 수 있음

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

export default function App() {
return (

<ScrollView style={styles.container}>
  <View style={styles.textContainer}>
    <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
  </View>
  <View style={styles.textContainer}>
    <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
  </View>
  <View style={styles.textContainer}>
    <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
  </View>
  <View style={styles.textContainer}>
    <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
  </View>
  <View style={styles.textContainer}>
    <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
  </View>
  <View style={styles.textContainer}>
    <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
  </View>
  <View style={styles.textContainer}>
    <Text style={styles.textStyle}>영역을 충분히 갖는 텍스트 입니다!</Text>
  </View>
</ScrollView>

);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
},
textContainer: {
height:100,
borderColor:'#000',
borderWidth:1,
borderRadius:10,
margin:10,
},
textStyle: {
textAlign:"center"
}
});