나만의꿀팁// 이미지 슬라이드 넣기

이제 혼자개발의 시작.

튜터님께서 도와주시던 모든게 끝났다. 

같이 손잡고 이끌어주던 튜터님 없이 혼자 개발하기 시작했다.

 

새로운 앱개발이 아닌 현재 같이만든 앱에서 추가하고 빼고 하면서 조금 손볼예정이다. 조금씩이렇게 알아나가는것이 흥미를 잃지않는 방법이다.

 

혼자서 해결하고 찾아보는것에 익숙해진 후 완전히 새로운 앱을 개발해볼 생각이다. 

 

---

정보를 제공하는데 사진한장으로는 뭔가 부족함을 느꼈다.

 

사진을 더 많이 보여주고자 이미지슬라이드를 추가해야 할것같다.

 

해야할 첫번째.

npm i react-native-image-slider-box

두번째.

yarn add react-native-image-slider-box

내 코드에 맞게 수정했다.

images 배열(array)이 필요하다.

   this.state = {
    images: [
         "https://source.unsplash.com/1024x768/?nature",
         "https://source.unsplash.com/1024x768/?water",
         "https://source.unsplash.com/1024x768/?girl",
         "https://source.unsplash.com/1024x768/?tree", // Network image
           // require('./assets/images/girl.jpg'),          // Local image
    ]}

기본문법.

<SliderBox
  images={this.state.images}
  onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}
  currentImageEmitter={index => console.warn(`current pos is: ${index}`)}/>

이제 다음은 DB에 각각의 데이터베이스에있는 내용의 사진들을 불러오는것이다.

 

react-native-image-slider-box

위 코드를 하나로 묶으면

<SliderBox
  images={[
  		"https://source.unsplash.com/1024x768/?nature",
        "https://source.unsplash.com/1024x768/?water",
        "https://source.unsplash.com/1024x768/?girl",
        "https://source.unsplash.com/1024x768/?tree", // Network image
           // require('./assets/images/girl.jpg'),          // Local image
           ]}
  onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}
  currentImageEmitter={index => console.warn(`current pos is: ${index}`)}/>

 

내용에 맞는사진을 데이터베이스에서 가져와서 뿌려줘야하는데..

array이용해서 반복돌리면 될것같은데.. 실력이안된다.. 5시간동안 했는데 도저히 안된다...

 

그래서  나름 보이게 했다.

결과만 똑같으면 되지모... 이쪽을 좀 더 공부해야겠다싶다.

<View><SliderBox
  images={[
    source={uri:tip.images01},
        {uri:tip.images02},
        {uri:tip.images03},
        {uri:tip.images04}, // Network image
           // require('./assets/images/girl.jpg'),          
        ]}
  onCurrentImagePressed={index => console.warn(`image ${index} pressed`)}
  currentImageEmitter={index => console.warn(`current pos is: ${index}`)}/>
  </View>