[react native]ScrollView사용하기

코드왕·2024년 1월 13일

ScrollView는 강제로 사이즈 할당을 해줘야한다.(동적 아니고 정적)

아래 내용을 보면 h-[] 이런식으로 안에 정수를 넣어주는게 핵심이다.
h-1/4 이런식으로 동적으로 하면 안된다.

import React from "react";
import { ScrollView, View, Dimensions, Text } from "react-native";
import { SafeAreaView } from "react-native-safe-area-context";
const { width, height } = Dimensions.get("window");

const VerticalScrollViewExample = () => {
  console.log(height/4)
  return (
    <SafeAreaView>
      <ScrollView>
        <View
          className={`h-[${height/4}] bg-cyan-200 justify-center items-center`}
        >
          <Text>111</Text>
        </View>
        <View
          className={`h-[${height/4}] bg-red-200 justify-center items-center`}
        >
          <Text>111</Text>
        </View>
        <View
          className={`h-[${height/4}] bg-blue-200 justify-center items-center`}
        >
          <Text>111</Text>
        </View>
        <View
          className={`h-[${height/4}] bg-yellow-200 justify-center items-center`}
        >
          <Text>111</Text>
        </View>
        <View
          className={`h-[${height/4}] bg-green-200 justify-center items-center`}
        >
          <Text>111</Text>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
};

export default VerticalScrollViewExample;
profile
CODE DIVE!

0개의 댓글