reactjs - 抽屉导航器 React Native 中的条件渲染

Question

我正在使用 Redux 在 React Native 中编写小应用程序。当用户注册时，我想向他显示“设置屏幕”，他可以在其中设置他的银行帐户。此外，当他登录或注册时，我正在 Redux 的后端检查他的银行帐户，然后将它们发送到我想要检索此数据的组件中。一切正常，但数据会在一段时间后出现（我认为这是整个问题）。然后根据这些数据，我想更改 DrawerNavigator 的 initialRouteName。如果它是空字符串或未定义返回设置屏幕，否则返回 HomeDrawerScreen。但它总是返回我设置屏幕。这是我的代码：

  const Drawer = createDrawerNavigator();

  export class Main extends Component {
  constructor(props) {
  super(props);

   this.role = null;
   this.state = {
   loading: true,
   loaded: false,
   };
   } 

    componentWillReceiveProps(nextProps) {
    if (this.props.bankAccount !== nextProps.bankAccount) {

    if (
    this.props.bankAccount !== "" ||
    this.props.bankAccount !== undefined  /*THIS MEANS DATA DOES NOT CAME FROM REDUX YET*/
     ) {
     this.setState({ loaded: true });
   
  }
}
     }
     render() {
     return (
     <Drawer.Navigator
     drawerContent={
     this.role
     ? props => <DrawerContentAdmin {...props} />
     : props => <DrawerContent {...props} />
    }
    drawerStyle={{ backgroundColor: "#4949FF" }}
    initialRouteName={this.state.loaded ? "HomeDrawer" : "Setup"}
  >
   <Drawer.Screen
      name="Setup"
      component={Setup}
      options={{
        swipeEnabled: false,
      }}
    />
    <Drawer.Screen name="HomeDrawer" component={MainTabScreen} />
   /...*OTHER SCREENS*/
  </Drawer.Navigator>
   }

   }

Answer 1

据我所知，您没有条件设置让用户转到设置以外的任何其他屏幕。我想你想要这样的东西

<Drawer.Navigator>
{isSignedIn ? (
  <>
   <Drawer.Screen
      name="Setup"
      component={Setup}
      options={{
        swipeEnabled: false,
      }}
    />
  </> ) :(
   <Drawer.Screen name="HomeDrawer" component={MainTabScreen} />
   /...*OTHER SCREENS*/
  )}
</Drawer.Navigator>