Question

我正在制作一个反应本机应用程序，其中包含两个如下所示的导航器。

const drawerNavigator = createDrawerNavigator(
    {
        HomePage: { screen: Stack },
        History: { screen: History },
        Transactions: { screen: Transactions },
        Profile: { screen: EditProfile },
        Wallet: { screen: Wallet },
        ResetPassword: { screen: ResetPassword }
    },
    {
        contentComponent: props => <Drawer { ...props }
/>;
},
{
    contentOptions: {
        activeTintColor: '#e91e63',
    }
});

const RootStack = createStackNavigator({
    Splash: { screen: Splash },
    Login: { screen: Login },
    Register: { screen: Register },
    ForgotPassword: { screen: ForgotPassword },
    CreateProfile: { screen: CreateProfile },
    UploadDocuments: { screen: UploadDocuments },
    Home: { screen: drawerNavigator }
}, {
    headerMode: 'none',
    initialRouteName: 'Splash'
});

现在的问题是，当我成功登录后，便进入像这样的抽屉导航器。

this.props.navigation.navigate("Home")

但是问题是当它进入堆栈时会默认打开抽屉。如何在react native中默认关闭抽屉

Answer 1

问题在于，有两条名为“ Home”的路由，其中一条在RootStack中，一条在抽屉导航中

因此，每次您导航到“家”时，两个路线都会被激活。尝试在任一堆栈中更改名称

**更新以关闭抽屉

const parent = this.props.navigation.dangerouslyGetParent();
const isDrawerOpen = parent && parent.state && parent.state.isDrawerOpen;

if(isDrawerOpen)
this.props.navigation.closeDrawer();

将其放入您的componentDidMount（）

**为了显示异步存储中的数据，我这样做了

class homeDrawerComponent  extends Component {

  constructor(props) {
        super(props);
        this.state = {
            user: null
        };
    }

    async componentDidMount() {
        let user = await appDataStorage.getUser();
        await this.setState({ user: user });
  }

  render(){

    const name = this.state.user?this.state.user.firstName+' '+this.state.user.lastName:'';
    const email = this.state.user?this.state.user.email:'';

    return (
      <SafeAreaView>
        <View
          style={{ height: height * .22, justifyContent: 'flex-start', alignItems: 'flex-start', backgroundColor: 'white',paddingLeft:10,paddingTop:10 }} >
          <Image
            source={require('./components/images/sj-book-library-logo-drawer.png')}
            style={{ width: width * .22, height: width * .25, borderRadius: 50 }} />
            <Text style={{ fontWeight: 'bold', color: '#0094FFFF' }}>
              {name}
            </Text>
          <Text style={{ fontWeight: 'bold', color: '#0094FFFF' }}>
            {email}
          </Text>
        </View>
        <ScrollView>
          <DrawerItems {...this.props} />
        </ScrollView>
      </SafeAreaView>
    )
  }
}

默认情况下，抽屉在react native中打开

1 个答案: