Zugriffsstatus innerhalb einer Funktion zum dynamischen Einstellen der Schubladenbreite

Question

Ich möchte die Schubladenbreite dynamisch ändern, wenn sich die Ausrichtung des Geräts ändert. Dies ist mein Code

updateWidth = (width) => { 
    this.setState({drawerWidth: width/2 }); 
    } 

ich updateWidth rufen, wenn componentDidMount und onLayout Funktionen aufgerufen werden.

In der drawerNavigator Erklärung, ich setze . Hier bekomme ich eine Fehlermeldung, dass drawerWidth: this.state.drawerWidth nicht definiert ist. Wie kann ich dieses Problem lösen?

Edit: Dies ist der Komponentencode Überblick

const { width } = Dimensions.get('window'); 

const AppDrawer = DrawerNavigator(
{ 
    Category: { 
    path: '/bla', 
    screen: bla, 
    }, 
}, 
{ 
    drawerWidth: this.state.drawerWidth , 
    contentComponent: test, 
    initialRouteName: 'tets', 
    contentOptions: { 
    activeTintColor: '#fd67d3', 
    }, 
} 
); 


const AppNavigator = StackNavigator({ 
... 
}) 


class RootContainer extends Component { 
constructor(props) { 
    super(props); 
    this.state = { 
     drawerWidth: 30 
    } 
} 

    onLayout(e) { 
    const {width, height} = Dimensions.get('window') 
    this.updateWidth(width); 
    } 

    updateWidth = (width) => { 
    this.setState({drawerWidth: width/2 }); 
    } 

    componentDidMount() { 
    this.updateWidth(width); 
} 

Answer 1

Ihre Schublade Komponente eine stateless Komponente ist. Erstellen Sie es als eine klassenbasierte Komponente neu und Sie können dann einen Zustand darin haben. Stateless-Komponenten können nur Requisiten aufnehmen, die ihnen übergeben wurden, aber sie können keinen Zustand speichern.

Answer 2

Sie müssen Ihren Status im Konstruktor initialisieren und eine zustandsbehaftete Komponente verwenden.

class AppDrawer extends Component { 
    constructor(props) { 
     super(props); 
     this.state = { 
      drawerWidth: 0 //or any other number 
     } 
    }