React原生抽屜（適用於iOS和Android）禁用/ drawerLock模式無法正常工作

Question

我是React本機開發的新手，我使用以下教程和github示例完成了抽屜功能： -

• Drawer Git hub鏈接
• 抽屜教程鏈接

因此，根據以上鏈接Drawer component有一個disable參數，有助於鎖定抽屜。

就我而言，我有： -

• Login Page :-所以我試圖在用戶沒有登錄系統時鎖定抽屜。
• Home Page :-因此，當用戶成功登錄時，我打開此頁面並解鎖我的抽屜。

添加了render()方法供參考： -

render() {
      <Drawer
                ref={(ref) => this._drawer = ref}
                disabled={!this.state.drawerEnabled}
                type="overlay"
                content={<Menu navigate={(route) => {
                    this._navigator.push(navigationHelper(route));
                    this._drawer.close()
                }}/>}
                tapToClose={true}
                openDrawerOffset={0.2}
                panCloseMask={0.2}
                closedDrawerOffset={-3}
                styles={{
                    drawer: {shadowColor: '#000000', shadowOpacity: 0.8, shadowRadius: 3},
                    main: {paddingLeft: 3}
                }}
                tweenHandler={(ratio) => ({
                    main: { opacity:(2-ratio)/2 }
                })}>
                <Navigator
                    ref={(ref) => this._navigator = ref}
                    configureScene={(route) => Navigator.SceneConfigs.FloatFromLeft}
                    initialRoute={{
                        id: 'Login',
                        title: 'Login',
                        index: 0
                    }}
                    renderScene={(route, navigator) => this._renderScene(route, navigator)}
                    navigationBar={
                        <Navigator.NavigationBar
                            style={styles.navBar}
                            routeMapper={NavigationBarRouteMapper} />
                    }
                />
            </Drawer>
      );
  }

所以，我的問題是： -

1. disabled參數不起作用。我也試過`setState（）'函數但結果是一樣的。
2. 請建議我在上述情況下使用的其他抽屜示例/教程。

Answer 1

我認為React Navigation庫是最好的選擇。 這是完全可定制的，並支持Android和IOS。 你應該使用Drawer Navigator，可以在這里獲得文檔。

在這里我添加代碼示例，我如何鎖定/解鎖抽屜。

這里StackApp將是您的Stack Navigator，其中包含所有抽屜頁面。

StackApp.navigationOptions = ({ navigation }) => {
  let drawerLockMode = 'unlocked';
  if (navigation.state.index > 0) {
    drawerLockMode = 'locked-closed'; //For child page it will lock drawer
  }
  return {
    drawerLockMode
  };
};
const DrawerStack = createDrawerNavigator({
  StackHome: {screen: StackApp},
  // Auth: {screen: AuthScreen},
}
,{
  drawerWidth:width*0.8,
  contentComponent: (props) =>
    <ScrollView>
      <Menu {...props}/>
    </ScrollView>
});

Answer 2

檢查反應原生文檔並找到' drawerLockMode '