리액트 네이티브(React Native), Expo로 이전 글에서는 Picker를 보완했으니 이제는 ListView에 넣은 이미지가 여러장일 때 paging할 수 있도록 할 것이다.

일단, ScrollView에 관해 전혀 모르니 Document를 참조한다.

속성에 보면 horizontal과 pagingEnabled이라고 있다. 각각을 일단 true로 만들어야 할 것 같다.

<ScrollView
  horizontal={true}
  pagingEnabled={true}
  showsHorizontalScrollIndicator={true} >
  // ...
</ScrollView>

이 코드를 원래 코드와 조합을 하면 아래와 같이 된다.

// ...

render() {
  // ...
  return (
    <ListView
      dataSource={this.state.dataSource}
      renderRow={(rowData, sectionID, rowID) =>
        <View style={{flex: 1, flexDirection: 'column', margin: 12}}>
          // ...
          <ScrollView
            style={{ flex: 1, marginBottom: 12}}
            horizontal={true}
            pagingEnabled={true}
            showsHorizontalScrollIndicator={true}

            >
              <Image source={{ uri: rowData.picture, cache: 'force-cache', }} style={{ flex: 1, width:  width-24, height: width-24}} />
              <Image source={{ uri: "https://www.instagram.com/p/BlGcOrlDr5W/media/?size=m", cache: 'force-cache', }} style={{ flex: 1, width:  width-24, height: width-24}} />
          </ScrollView>
          // ...
        </View>
      }
      enableEmptySections
    />
  );
}

//...

위와 같이 코드를 작성할 수 있다. 한가지 조심해야 할 부분이 ScrollView에서 크기를 잡는 것이 아닌 자식 뷰에서 크기를 잡아야 한다는 점이다.

리액트네이티브(ReactNative), Expo의 장점이라면 일단 이미지 캐싱에 대한 생각을 안해도 된다는 점과 저렇게 웹에서 이미지를 손쉽게 가져올 수 있다는 점인 것 같다.

전체 소스는 링크로 가면 볼 수 있다.