2017-01-04 1 views
0

네트워크 이미지를 렌더링하는 데 react-native-image-progress을 사용하고 있습니다. 지침에 따라 react-native-progress도 설치했습니다.React-native-image-progress가 진행 상황을 표시하지 않습니다.

여기에 (예와 매우 유사) 내 구성 요소의 :

<Image 
     source={{ uri: 'http://loremflickr.com/640/480/dog' }} 
     indicator={ProgressCircle} 
     indicatorProps={{ 
      showsText: true, 
     }} 
     style={{ 
      width: 320, 
      height: 240, 
     }} 
/> 

표시기 - 원은 일반적으로 나타나지만 원은 그냥 무작위로 진전의 어떤 신호를 회전하지 않고 텍스트도 없었다. 잠시 후 그림이 렌더링됩니다.

indicatorPropsindeterminate: false을 추가하려고 시도했습니다. 이번에는 텍스트를 보여 주지만 0 %로 고정되어 있습니다. 그런 다음 잠시 후 그림이 렌더링됩니다.

내가 잘못했을 가능성이 있습니까?

답변

0

문제는 소품이 누락되었습니다 : progress.

우리는 상태를 만들고 심판처럼 애니메이션을해야합니다 현장 indicator에서 RN-Progress Example

, 우리는 반환 함수를 호출 할 필요가 <Progress.Circle>

render() { 
    return(
     <View style={styles.container}> 
     <Image 
     source={{ uri: 'http://loremflickr.com/640/480/dog' }} 
     indicator={() => <Progress.Circle 
      style={styles.progress} 
      progress={this.state.progress} 
      indeterminate={this.state.indeterminate} 
     />} 
     indicatorProps={{ 
      showsText: true, 
     }} 
     style={{ 
      width: 320, 
      height: 240, 
     }} 
     /> 
     </View> 
    ); 
    } 

나는 시도하고 일을이다, 내 대답은 도움이 될 수 있습니다 희망 당신.

+0

죄송합니다. 그러나 실제 진행 상황을 감지하는 방법은 무엇입니까? 이 예에서는 진행 상황이 무작위로 설정되었습니다. –

+0

그리고 구성 요소는 여전히 텍스트를 표시하지 않습니다. 텍스트를 표시기 구성 요소 안에 넣으면 값은 진행 상황과 일치하지 않습니다. –

관련 문제