ドロワの幅を動的に設定する関数内のアクセス状態

Question

デバイスの向きが変化したときにドロワの幅を動的に変更したい。これは私のコード

componentDidMountと onLayout関数が呼び出されたとき、私はupdateWidthを呼び出す

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

です。

drawerNavigator宣言では、drawerWidth: this.state.drawerWidthと設定しました。ここで私はdrawerWidth: this.state.drawerWidthが定義されていないことを私に知らせるエラーを得る。どうすればこの問題を解決できますか？

編集： これはあなたの引き出しのコンポーネントはステートレスなコンポーネントであるコンポーネントのコードの概要

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

です。それをクラスベースのコンポーネントとして再作成し、その中に状態を持たせることができます。ステートレスコンポーネントは、渡された小道具だけを取得できますが、ステートは保存できません。

Answer 2

コンストラクタで状態を初期化し、ステートフルなコンポーネントを使用する必要があります。

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