[開発ログ]アプリケーション開発2週目:ホームページの作成

25842 ワード
テキストリンク
授業は2週間ですが、実は1週間はほとんど毎日聞いています.
大体ラベルを説明して、私に彼らに1枚の写真をあげさせて、彼らに体現させて、私にとても困惑させます.
どこから手をつければいいのか分からない.
しかしやはり1つ1つ構造を考えて行い、3時間で差が少なく完成した.
一つ目は課題写真、二つ目は私が作った画面です.

写真が大きすぎてちょっとパニック...はい.
とにかく私が作ったコードはこうです!
import React from 'react';
import { StyleSheet, Text, View, Image, TouchableOpacity, Alert, ScrollView, horizontal } from 'react-native';
import { backgroundColor } from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';
import NativePushNotificationManagerIOS from 'react-native/Libraries/PushNotificationIOS/NativePushNotificationManagerIOS';
import favicon from "./assets/favicon.png"

export default function App() {
  return (
    <View style={styles.container}>
      <View style={styles.textContainer}>
        <Text style={styles.textStyle}>몌의 꿀팁</Text>
      </View>
      <View style={styles.imageContainer}>
        <Image source={{uri:'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fmain.png?alt=media&token=8e5eb78d-19ee-4359-9209-347d125b322c'}}
          resizeMode={"center"}
          style={styles.imageStyle}
          />      
      </View>
      <ScrollView style={styles.buttonContainer} horizontal>
        <View style={styles.buttonOne}>
          <TouchableOpacity style={styles.button}>
            <Text style={styles.buttonTextStyle}>생활</Text>
          </TouchableOpacity>
        </View>
       <View style={styles.buttonTwo}>
              <TouchableOpacity style={styles.button}>
                <Text style={styles.buttonTextStyle}>제테크</Text>
              </TouchableOpacity>
        </View>
        <View style={styles.buttonThree}>
          <TouchableOpacity style={styles.button}>
            <Text style={styles.buttonTextStyle}>반려견</Text>
          </TouchableOpacity>
        </View>
        <View style={styles.buttonFour}>
          <TouchableOpacity style={styles.button}>
            <Text style={styles.buttonTextStyle}>꿀팁 찜</Text>
          </TouchableOpacity>
        </View>
      </ScrollView>

      <View style={styles.containerFour}>
        <View style={styles.contentImageContainer}>
          <Image source={{uri:'https://firebasestorage.googleapis.com/v0/b/sparta-image.appspot.com/o/lecture%2Fpizza.png?alt=media&token=1a099927-d818-45d4-b48a-7906fd0d2ad3'}}
          resizeMode={"cover"}
          style={styles.contentImageStyle}
          />    

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

    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex:1
  },
  textContainer: {
    flex:1,
    backgroundColor:"#fff",
    alignItems:'flex-start',
    justifyContent: 'flex-end',
    margin: 20
  },
  textStyle:{
    fontSize: 21,
    fontWeight: "700",
    textAlign:"justify"
  },
  imageContainer:{
    flex:3,
    flexDirection:"row",
    margin: 15,
    marginTop: 0
  },
  imageStyle:{
    width: "100%",
    height: "100%",
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 15
  },
  buttonContainer:{
    flex:1,
    flexDirection:"row",
  },
  buttonTextStyle:{
    textAlign:"center",
    fontSize: 16,
    color: "white",
    fontWeight: "600"
  },
  buttonOne:{
    height: 60,
    width: 120,
    borderRadius:18,
    padding: 20,
    backgroundColor: "orange",
    marginLeft: 15
  },
  buttonTwo:{
    backgroundColor: "pink",
    height: 60,
    width: 120,
    borderRadius:18,
    padding: 20,
    marginLeft: 15
  },
  buttonThree:{
    backgroundColor: "lightgreen",
    height: 60,
    width: 120,
    borderRadius:18,
    padding: 20,
    marginLeft: 15
  },
  buttonFour:{
    backgroundColor: "purple",
    height: 60,
    width: 120,
    borderRadius:18,
    padding: 20,
    marginHorizontal: 15
  },
  containerFour:{
    flex:4,
    flexDirection:"row",
    padding:15
  },
  contentImageContainer: {
    flex:1,
  },
  contentImageStyle:{
    width: "100%",
    height: 100,
    alignItems: "center",
    justifyContent: "center",
    borderRadius: 15
  },
  contentTextContainer: {
    flex:2,
    height: 100,
    alignItems:"flex-start",
    paddingHorizontal: 10,
  },
  contentDateStyle :{
    color: "lightgray",
    fontSize: 12
  }
});
今は課題解説を聞きながら修正して何が違うのか比較してみましょう-!
import React from 'react';
import main from './assets/main.png';
import { StyleSheet, Text, View, Image, TouchableOpacity, ScrollView} from 'react-native';
import { borderRightColor } from 'react-native/Libraries/Components/View/ReactNativeStyleAttributes';

export default function App() {
  console.disableYellowBox = true;
  return (
  <ScrollView style={styles.container}>
    <Text style={styles.title}>나만의 꿀팁</Text>
    <Image style={styles.mainImage} source={main}></Image>
    <ScrollView style={styles.middleContainer} horizontal={true}>
      <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.cardContainer}>
      <View style={styles.card}>
        <Image style={styles.cardImage} source={{uri:"https://storage.googleapis.com/sparta-image.appspot.com/lecture/pizza.png"}}/>
        <View style={styles.cardText}>
          <Text style={styles.cardTitle}>먹다 남은 피자를 촉촉하게</Text>

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

          <Text style={styles.cardDate}>2022.03.26</Text>
        </View>
      </View>
    </View>
  </ScrollView>
  )
}

const styles = StyleSheet.create({
  container:{
    backgroundColor:"#fff"
  },
  title:{
    fontSize: 20,
    fontWeight: "700",
    marginTop: 50,
    marginLeft: 20
  },
  mainImage:{
    width: "90%",
    height: 200,
    borderRadius: 10,
    marginTop:20,
    alignSelf: "center"
  },
  middleContainer:{
    marginTop:20,
    marginLeft: 10,
    height: 60
  },
  middleButton01:{
    width: 100,
    height: 50,
    padding: 15,
    backgroundColor:"orange",
    borderRadius: 15,
    margin:7
  },
  middleButton02:{
    width: 100,
    height: 50,
    padding: 15,
    backgroundColor:"yellowgreen",
    borderRadius: 15,
    margin:7
  },
  middleButton03:{
    width: 100,
    height: 50,
    padding: 15,
    backgroundColor:"skyblue",
    borderRadius: 15,
    margin:7
  },
  middleButton04:{
    width: 100,
    height: 50,
    padding: 15,
    backgroundColor:"pink",
    borderRadius: 15,
    margin:7
  },
  middleButtonText:{
    color: "#fff",
    fontWeight: "700",
    textAlign: "center"
  },
  cardContainer:{
    marginTop: 10,
    marginLeft: 10,
  },
  card:{
    flex:1,
    flexDirection:'row',
    margin: 10,
  },
  cardImage:{
    flex: 1,
    width:100, 
    height:100,
    borderRadius:10
  },
  cardText:{
    flex:2,
    flexDirection:"column",
    marginLeft: 10
  },
  cardTitle:{
    fontSize: 20,
    fontWeight: "700",
  },
  cardDesc:{
    fontSize: 15    
  },
  cardDate:{
    fontSize:10,
    color:"gray"
  }

})
私が書いたコードとは大きく異なり、Flexのフルスクリーンではなく、ScollViewを使用してシステム全体を移動できるようにしています.
コードを効率的に簡潔に書きたいという欲求が横たわる課題である.
見ているうちに本当にたくさんのことを感じました.
私も簡単にコードを作りたいです.
今始まったばかりで、ますますよくなると信じています!!
[アルゴリズム][BOJ]11049行列乗算順序
この学習ノート