나는 원주민 식 & REDUX에서 앱을 제작하고 있습니다. React Native의 Progress View iOS를 사용하여 매우 단순한 네이티브 보이는 진행률 표시 줄을 보여줍니다. 이 REDUX 컨테이너 뷰 자체의 렌더링 방법뿐만 아니라 그리고 내가 진행의 모든 값이 벌금을 만드는 것을 100 % 긍정적 인 생각에반응 네이티브 진행률보기 iOS가 다시 렌더링되지 않습니다.
renderProgressBar() {
if(!!Platform.OS) {
switch(Platform.OS) {
case 'ios':
return (
<ProgressViewIOS
progress={(this.props.backgroundData.percentageLoaded || 0)}
progressTintColor={globalProgressBarTintColor}
trackTintColor={globalProgressBarEmptyTrackTintColor} />
);
case 'android':
return (
<ProgressBarAndroid
color={globalProgressBarTintColor}
progress={(this.props.backgroundData.percentageLoaded || 0)} />
);
default:
return null;
}
} else {
return null;
}
}
내가 응용 프로그램을 일시 중지 : 여기에 코드입니다. 그들은 내 컨테이너의 감속기에서보기로 전달되는 것으로 나타납니다. 그것들은 모든 렌더링 방법에도 나타납니다. 그들은 0, 0.2, 0.4, 0.666666601, 0.8 및 1입니다.
그럼 제가 말한 것은 this.props.backgroundData.percentageLoaded이 방금 언급 한 이러한 값과 같습니다. 나는 그것을 멈출 수 있고 그 값이 확실히 거기에 있음을 볼 수 있으며 그것은 숫자가 아닌 문자열이므로 모든 것이 잘되어야한다. 웬일인지, 5 번 렌더링하더라도 아무 것도 나타나지 않습니다.
진도 값을 1로 설정하고 막대에서 빨간색과 파란색으로 색을 설정했기 때문에 UI 스택을 현명하게 말하면서 다른 것보다 뒤에 있지 않습니다. 그 미친 빨강/파랑 색을 유지하고 위에서 언급 한 모든 값으로 진행률을 설정하면 모든 작업이 개별적으로 수행됩니다 (동적 소품 값이 아닌 하드 코드). 내가 난처한 상황에 빠진
render() {
this.titleWidth = this.props.deviceWidth/2;
return (
<View>
<View style={[
styles.navbar,
{
width: this.props.deviceWidth,
justifyContent: (this.props.showBackIcon === false && this.props.showingTitle === false) ? 'flex-end' : 'space-between',
}
]}>
{ this.props.showBackIcon ? this.renderBackButton() : null }
{ this.props.showingTitle ? this.renderTitle() : null }
{ this.props.showingIcon ? this.renderRightIconButton() : null }
{ this.props.showingTextButton ? this.renderRightTextButton() : null }
</View>
{ this.renderProgressBar() }
</View>
);
}
:
이 경우 사람이 만 나는이 렌더링하고 다음과 같습니다 사용하고 기본 라이프 사이클 방법 반응을 알고 싶어한다. 누구를 생각해? 감사.
편집 : 또한 , 그것이 도움 넣다, 여기에 소품로 전송되는 컨테이너 코드 :
const mapStateToProps = (state, props) => {
return {
...safelyBuildPassProps(state.navigation.route.passProps),
deviceHeight: state.appSettings.deviceOrientation.currDeviceHeight,
deviceWidth: state.appSettings.deviceOrientation.currDeviceWidth,
backgroundData: {
loadingData: state.appSettings.loadingBackgroundData,
percentageLoaded: state.appSettings.loadingBackgroundDataPercent,
},
}
}
두 번째 편집
나는이 모든 기반 것을 더 설명해야ASync 호출 및 변환 모든 프로세스는 클라이언트 (장치)에 발생하고, 프로세스는 다음과 같습니다
- 전화 걸기가 백엔드 (이 로컬 ASync 함수)는 응답 객체를 지우고 색상 및 기타 등을 사용하여 적절한 UI 결과로 변환합니다.
- 응답 객체 배열을 반복 한 다음 배열의 길이를 100으로 나누고 다시 100으로 나누어
ProgressViewIOS의 10 진수 값을 얻습니다. 사용. - 각 개체의 변형을 완료 한 직후 비율을 전송하십시오.
- Dispatch는 진행률 표시 줄이있는 위치에서 navbar를 다시 호출하여 위의 코드와 같이 새 비율로 처리합니다.
- 다시 쓰게은 (내가 여기를 일시 중지가 적절한 JSX 개체 및 백분율 돌아보고) 장치의 화면 변경에 아무것도하지만 일어나는
위대한 쓰기위한 소품! 앱이'case 'ios':'내부로 돌아와서 'return null'로가는 길을 선택하지 않았다고 확신합니까? –
@BradBumbalough 예, 'ios'케이스 바로 뒤에서 디버거를 놓고 백분율이 JSX obj를 반환하는지 확인합니다. 나는 또한 모든 적절한 값을'typeof 'number'로 검증하여'ProgressViewIOS'에 넣었다고 말할 수 있습니다. 제가 아직 시도하지 않은 유일한 것은 노드 모듈에 들어가서 ProgressViewIOS를 찾고 render 메소드에 디버거를 넣는 것입니다. – GoreDefex
오, 죄송합니다. 또한 모든 return null; 문에 중단 점을 넣습니다. – GoreDefex