React native 0.50.4
및 react navigation 1.0.0-beta.19
을 사용하고 있습니다. 나는 성능 문제가있다. 나는 Tab navigator
을 기본적으로 4 개의 탭과 함께 사용하고있다. (최대 11 개의 필드) 나는 모든 폼 필드 (4 개의 탭 모두)를 redux 상태로 연결했다. 마지막 탭에서 저장이 발생하면 데이터를 사용할 수 있습니다.redux를 사용한 Tab Navigator 성능 문제
이제 각 탭의 componentDidMount
에서 편집 할 때 (버튼 편집을 클릭하여)이 Tab navigator
으로 이동할 수 있습니다. 각 필드의 상태를 채우는 액션 크리에이터를 파견하고 있습니다. (mapStateToProps에서) 필드 값을 채우는 render 메소드에서.
참고 :
이Edit button
클릭하면
성능 문제, 그것은 몇 걸립니다 편집 버튼을 클릭하면 데이터가 여기 서버에서 반입되고되지 않으며, 데이터 탐색 상태를 통해 전달되는 초 (실제 장치에서 에뮬레이터에서 성능 문제 없음) 탐색을 수행하기 전. 나는 componentDidMount
다른 모든 파견을 수행하기 전에 시작하는로드 상태를 가지고 있지만 여전히 탐색
constructor(props){
super(props);
props.initialLoader(); // STATE HERE LOADING: TRUE
}
componentDidMount(){
if (this.props.navigation.state.params){
const userData = this.props.navigation.state.params.userData;
this.populateOperation(userData).then(() => {
this.props.dismissLoader(); // LOADING: FALSE
});
}
}
populateOperation = (userData) => {
return new Promise((resolve) => {
resolve(
this.props.inputChanged(userData.emailAddress),
this.props.addressInputChanged(userData.address),
this.props.addressContInputChanged(userData.addressCont),
this.props.cityInputChanged(userData.city),
this.props.stateInputChanged(userData.state),
this.props.postalCodeInputChanged(userData.postalCode),
this.props.countryInputChanged(userData.country == ''? 'Country' : userData.country),
this.props.phoneInputChanged(userData.phone),
this.props.mobilePhoneInputChanged(userData.mobile),
this.props.linkedInInputChanged(userData.linkedIn),
this.props.twitterInputChanged(userData.twitter),
);
});
}
render(){
const {...} = this.props.formState;
return(
<KeyboardAwareScrollView
style={outerContainer}
keyboardOpeningTime={100}
extraScrollHeight={5}
>
{
loading ?
... // SHOW LOADING
:
... // FORM
}
);
}
function mapStateToProps (state){
return {
formState: state.contactReducer
}
}
function mapDispatchToProps(dispatch){
return {
...
}
}
export default connect(mapStateToProps, mapDispatchToProps)(ContactTab);
(단지 보여, 그것은 탐색 및로드 상태와 모든 것을 한 번에 준비가 표시되지 않습니다 의미) 즉시 발생하지 않습니다 시도
위의 코드는 탭 중 하나의 예제입니다.
참고 : 정말 나쁜 REDUX-썽크 성능을했다 사용하는 경우, 그것은 아마도 탐색, REDUX-사가로 전환 한 후,이 주를 탐색 3-4 초 복용, 빠른되었다 더 칠초까지했다 : 탭 네비게이터는 최상위 스택 탐색기에 중첩되어 있습니다.
이것은 답변이 아닙니다. 질문에 대한 코멘트 여야합니다. – pcarter
네가 맞아, 왜 내가 그걸 보지 못했는지 모르겠다. – Yasir