👋 アプリケーション開発の準備

npm install -g yarn

yarn -v

npm install -g expo-cli

expo start

画面を構成する要素

Button

TouchableOpacity

Image

1）内部写真

2）外部写真

共通スタイルシート

const styles = StyleSheet.create({
  container: {
    //영역을 잡는 속성입니다. 따로 자세히 다룹니다.
    //flex: 1은 전체 화면을 가져간다는 뜻입니다
    flex: 1,
    //영역의 배경 색을 결정합니다
    backgroundColor: '#fff',
    //아래 두 속성은 영역 안의 컨텐츠들의 배치를 결정합니다. 
    //flex를 자세히 다룰때 같이 자세히 다룹니다
    justifyContent:"center",
    alignContent:"center"
  },
  textContainer: {
    //영역의 바깥 공간 이격을 뜻합니다(하단 이미지 참조)
    margin:10,
    //영역 안의 컨텐츠 이격 공간을 뜻합니다(하단 이미지 참조)
    padding: 10,
    //테두리의 구부러짐을 결정합니다. 지금 보면 조금 둥글죠?
    borderRadius:10,
    //테두리의 두께를 결정합니다
    borderWidth:2,
    //테두리 색을 결정합니다
    borderColor:"#000",
    //테구리 스타일을 결정합니다. 실선은 solid 입니다
    borderStyle:"dotted",

  },
  textStyle: {
    //글자 색을 결정합니다. rgb, 값 이름, 색상코드 모두 가능합니다
    color:"red",
    //글자의 크기를 결정합니다
    fontSize:20,
    //글자의 두께를 결정합니다
    fontWeight:"700",
    //가로기준으로 글자의 위치를 결정합니다
    textAlign:"center"
  }
});

alignItems

ScollViewでの横属性の適用

<ScrollView style={styles.middleContainer} horizontal={true}>
</ScrollView>

NumberOfLinesを使用してテキストを省略

<View style={styles.cardText}>
  <Text style={styles.cardTitle}>먹다 남은 피자를 촉촉하게!</Text>
  <Text style={styles.cardDesc} numberOfLines={3}>
    먹다 남은 피자는 수분이 날라가기 때문에 처음처럼 맛있게 먹을 수
    없는데요. 이럴 경우 그릇에 물을 받아 전자레인지 안에서 1분
    30초에서 2분 정도 함께 돌려주면 촉촉하게 먹을 수 있습니다. 물이
    전자레인지 안에서 수증기를 일으키고, 피자에 촉촉함을 더해줍니다.
  </Text>
  <Text style={styles.cardDate}>2020.12.02</Text>
</View>