使用redux的Tab Navigator性能问题

Z时代
2024-01-10
分类：问答

我正在使用React native 0.50.4和react navigation 1.0.0-beta.19。我有一个性能问题。我使用Tab navigator与4个选项卡基本上每个表单（最多11个字段）我已经将所有表单字段（全部4个选项卡）以redux状态连接起来。以便在最后一个选项卡保存时数据可用。使用redux的Tab Navigator性能问题

现在用户可以在编辑时（通过单击按钮编辑）导航到此Tab navigator，每个标签的componentDidMount。我正在派遣行动创作者，填充每个领域的状态。然后在渲染方法中填充字段值（来自mapStateToProps）。

注意：没有数据是从这里服务器获取的数据通过导航状态点击编辑按钮

性能问题是其中点击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);