Question

我想在设备方向改变时动态更改抽屉宽度。这是我的代码

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

调用componentDidMount和onLayout函数时调用updateWidth。

在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
      }
  }

访问函数内部的状态以动态设置抽屉宽度

2 个答案: