2017-10-18 4 views
1

ScrollView 구성 요소에 이미지 (전체 크기로 이미지)를 추가하려고하는데 아이디어는 이미지를 자신의 크기대로 (제한없이) 대신 스크롤을 수평 및 수직으로 만듭니다 (이미지에 따라 다름). 그래서 내 구성 요소가 여기하는 ScrollView 내부ScrollView 내부의 큰 이미지가 스크롤을 허용하지 않습니다.

import React, { Component } from 'react'; 
import { Image, ScrollView } from 'react-native'; 

export default class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     width: 10, 
     height: 10, 
     image: 'http://www.francedimanche.fr/parole/wp-content/uploads/2017/08/Angelina-Jolie.png', 
    } 
    } 

    componentDidMount() { 
    Image.getSize(this.state.image, (width, height) => { 
     this.setState({ width, height }); 
    }); 
    } 

    render() { 
    return (
     <ScrollView> 
     <Image 
      style={{ width: this.state.width, height: this.state.height }} 
      source={{uri: this.state.image}} 
     /> 
     </ScrollView> 
    ); 
    } 
} 

덕분에 그것에 대한 Image.getSize()을 사용하고 있습니다!

답변

1

ScrollView에서 가로 또는 세로로 이동할 수 있습니다. 두 가지 모두를 얻으려면 다음을 중첩하면됩니다.

<ScrollView horizontal={true}> 
    <ScrollView> 
     <Image 
     style={{ width: this.state.width, height: this.state.height }} 
     source={{uri: this.state.image}} 
     /> 
    </ScrollView> 
    </ScrollView>