[React Native] Text 말줄임 속성, ScrollView 가로 스크롤

 

말줄임 속성 numberOfLines

<Text numberOfLines={2}> 2줄이 넘어가면 맨 끝이 '...'으로 표시 될 긴 내용의 텍스트 </Text>

공식문서 : https://reactnative.dev/docs/text?redirected 

Text · React Native

 

 

ScrollView 가로 스크롤로 변경하고싶을때 horizontal 추가하기

<ScrollView style={styles.middleContainer} horizontal indicatorStyle={"auto"}>

</ScrollView>

공식문서 : https://reactnative.dev/docs/scrollview

ScrollView · React Native

 

 

- 스파르타 코딩클럽 앱개발 2-12 숙제

import React from 'react';
import { StyleSheet, Text, View, ScrollView, SafeAreaView, Image, TouchableOpacity } from 'react-native';
import { Colors } from 'react-native/Libraries/NewAppScreen';

const main = "https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fmain.png?alt=media&token=8e5eb78d-19ee-4359-9209-347d125b322c"
const cont = "https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fpizza.png?alt=media&token=1a099927-d818-45d4-b48a-7906fd0d2ad3"
export default function App() {
  return (
    <SafeAreaView style={styles.safe}>
      <ScrollView style={styles.container}>
        <View style={styles.titleContainer}>
          <Text style={styles.titleStyle}>TIP Board</Text>
        </View>
        <View style={styles.textContainer}>
          <Image 
            source={{uri:main}}
            resizeMode={"cover"}
            style={styles.imageStyle}
          />
        </View>
        <ScrollView style={styles.middleContainer} horizontal indicatorStyle={"auto"}>
          <TouchableOpacity style={styles.middleButton01}><Text style={styles.middleButtonText}>생활</Text></TouchableOpacity>
          <TouchableOpacity style={styles.middleButton02}><Text style={styles.middleButtonText}>재테크</Text></TouchableOpacity>
          <TouchableOpacity style={styles.middleButton03}><Text style={styles.middleButtonText}>반려견</Text></TouchableOpacity>
          <TouchableOpacity style={styles.middleButton04}><Text style={styles.middleButtonText}>꿀팁 찜</Text></TouchableOpacity>
        </ScrollView>
        <View style={styles.contContainer}>
          <Image 
            source={{uri:cont}}
            resizeMode={"cover"}
            style={styles.imageStyle2}
          />
          <View style={styles.contTextWrap}>
            <Text style={styles.contStyle1}>먹다 남은 피자를 촉촉하게!</Text>
            <Text style={styles.contStyle2} numberOfLines={3}>먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기를 일으키고, 피자에 촉촉함을 더해줍니다.</Text>
            <Text style={styles.contStyle3}>2020.09.09</Text>
          </View>
        </View>
        <View style={styles.contContainer}>
          <Image 
            source={{uri:cont}}
            resizeMode={"cover"}
            style={styles.imageStyle2}
          />
          <View style={styles.contTextWrap}>
            <Text style={styles.contStyle1}>먹다 남은 피자를 촉촉하게!</Text>
            <Text style={styles.contStyle2} numberOfLines={3}>먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수 없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분 30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이 전자레인지 안에서 수증기를 일으키고, 피자에 촉촉함을 더해줍니다.</Text>
            <Text style={styles.contStyle3}>2020.09.09</Text>
          </View>
        </View>
      </ScrollView>
    </SafeAreaView>
  );
}

const styles = StyleSheet.create({
  safe: {
    flex: 1
  },
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
  titleContainer: {
    margin:10,
  },
  titleStyle: {
    fontSize:26,
    fontWeight: "bold"
  },
  textContainer: {
    height:200,
    borderRadius:20,
    margin:10,
    overflow: "hidden"
  },
  textStyle: {
    textAlign:"center"
  },
  imageStyle: {
    width:"100%",
    height:"100%",
    alignItems:"center",
    justifyContent:"center"
  },
  imageStyle2: {
    width:100,
    height:100,
    borderRadius:10,
  },
  middleContainer: {

    margin:10,
  },
  middleButtonText: {
    fontSize:16,
    minWidth:60,
    textAlign:"center",
    color:"#fff",
    fontWeight:"bold"
  },
  middleButton01: {
    padding:15,
    borderRadius:10,
    marginRight:10,
    backgroundColor:"#F5CC70"
  },
  middleButton02: {
    padding:15,
    borderRadius:10,
    marginRight:10,
    backgroundColor:"#F19C83"
  },
  middleButton03: {
    padding:15,
    borderRadius:10,
    marginRight:10,
    backgroundColor:"#B2DFD0"
  },
  middleButton04: {
    padding:15,
    borderRadius:10,
    marginRight:10,
    backgroundColor:"#ED96B4"
  },
  contContainer: {
    flexDirection:"row",
    margin:10,
    overflow: "hidden",
    borderBottomColor:"#eee",
    borderBottomWidth:1,
    paddingBottom:20,
  },
  contTextWrap: {
    flex:1,
    marginLeft:10,
    textAlign:"left"
  },
  contStyle1: {
    fontSize:20,
    fontWeight:"bold"
  },
  contStyle2: {
    fontSize:14,
    marginBottom:5,
    marginTop:5,
  },
  contStyle3: {
    fontSize:12,
    color:"#999"
  },
});

 

보여지는 Expo Go 화면