React Native Router Flux和React Native Meteor初始场景渲染问题

时间:2019-02-22 20:52:11

标签: react-native react-native-router-flux react-native-meteor

嗨,我需要帮助,我已经创建了一个索引页面,该页面检查用户是否登录并进行相应的重定向 并将数据通过createContainer传递到该组件 一切正常,但现在登录后 我打开了路由器页面并从那里重定向 除withTracker的组件外,所有组件均正确路由 我再次被推到默认的初始屏幕

演练->

1。)登录屏幕

2。)显示时间表(路由器中的初始名称)

3。)单击“叶子”->“应用请假”

4。)尝试打开请假

5。)打开一秒钟,然后返回初始页面(时间表)

index.js

`const myApp = (props) => {
  const { status, user, loggingIn } = props;
  if (status.connected === false || loggingIn) {
    // return <Loading />;
    return <RouterStack />
  } else if (user !== null) {
    // return <Home />
    return <RouterStack />
  }
  return <Login />
  };
  myApp.propTypes = {
  status: PropTypes.object,
  user: PropTypes.object,
  loggingIn: PropTypes.bool,
  };
  export default createContainer(() => {
  return {
    status: Meteor.status(),
    user: Meteor.user(),
    loggingIn: Meteor.loggingIn(),
  };
  }, myApp);
`

Router.js

`
export default class App extends Component {
  constructor(props) {
    super(props)
  }
  render() {
    return (
      <Router getSceneStyle={() => styles.sceneStyle}>
        <Scene key="root">
          <Scene key="Timesheets" component={Timesheets} title="Timesheets" initial />
          <Scene key="applyLeave" component={ApplyLeave} title="Apply Leave"  />
          <Scene key="Login" component={Login} title="Login" />
          <Scene key="Leaves" component={Leaves} title="Leave" />
          <Scene key="ViewLeave" component={LeaveHistory} title="Leaves History"/>
          <Scene key="Profile" component={Profile} title="Profile" />
        </Scene>
      </Router>
    )
  }
}
`

ApplyLeave.js

`class ApplyLeave extends Component {
render(){
return <View><Text></Text></View> //just for Demo
}
}
export default withTracker(params => {
    if (Meteor.user() != null) {
        const employeeId = Meteor.user();
        const leaves = Meteor.subscribe('leaves', employeeId);
        const entitlements=Meteor.subscribe('entitlements',employeeId);      
        return {
            myLeavesReady: leaves.ready(),
            myEntitlements: entitlements.ready()
        };
    }
    return {}
})(ApplyLeave);
`

1 个答案:

答案 0 :(得分:1)

您面临的问题实际上是一个功能,它说明一切正常(createContainer + React)。

发生的情况是,createContainer的{​​{1}}的return语句中的参数之一发生了更改(或至少是被动地重新发送),并且由于myApp不会检查是否应该重新渲染(myApp),默认情况下==>您回到了初始屏幕。

解决问题的步骤

现在,这取决于您是否需要在shouldComponentUpdate的{​​{1}}中返回的数据。如果您需要数据或需要来自createContainer的其他属性(例如,配置文件信息可能会更改),则需要创建自己的myApp并检查这些值是否更新。

我认为情况并非如此,因此您可以将要传递的道具更改为实际需要的最小数量(无需传递用户对象-注意Meteor.user()是也是一个对象),并使用shouldComponentUpdate来防止不必要的重新渲染。

Meteor.status()