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

【问题标题】：React Native Router Flux and React Native Meteor inital Scene rendering IssueReact Native Router Flux 和 React Native Meteor 初始场景渲染问题
【发布时间】：2019-02-22 20:52:11
【问题描述】：

您好，我需要帮助，我创建了一个索引页面，用于检查用户是否登录并相应地重定向并且数据通过 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);
`

【问题讨论】：

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

【解决方案1】：

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

发生的情况是，myApp 的 createContainer 的 return 语句中的一个参数发生了变化（或者至少是被动地重新发送），并且由于 myApp 不检查它是否应该重新渲染（@987654325 @) 默认情况下会这样做 => 你会回到初始屏幕。

解决问题的步骤

现在，这取决于您是否需要在 createContainer 或 myApp 中返回的数据。如果您需要来自Meteor.user() 的数据或其他属性（例如可能会更改的个人资料信息），您需要创建自己的shouldComponentUpdate 并检查这些值是否更新。

我认为你的情况并非如此，所以你可能会很好地将你传递的道具更改为你实际需要的最小值（不传递用户对象 - 请注意 Meteor.status() 也是object) 并使用PureComponent 来防止不必要的重新渲染。

class myApp extends React.PureComponent {

    render() {
        const { isConnected, isSignedIn, isSigningIn } = this.props;
        if (!isConnected || isSigningIn) {
            return <RouterStack />;
        } else if (isSignedIn) {
            return <RouterStack />;
        }
        return <Login />;
    }
}

myApp.propTypes = {
    isConnected: PropTypes.bool,
    isSignedIn: PropTypes.bool,
    isSigningIn: PropTypes.bool,
};

// if Meteor.something() is null, !!Meteor.something() is false
// if Meteor.something() is a valid object, !!Meteor.something() is true
export default createContainer(() => ({
    isConnected: !!Meteor.status().connected,
    isSignedIn: !!Meteor.user(),
    isSigningIn: !!Meteor.loggingIn(),  
}), myApp);

【讨论】：