Question

我试图根据导航抽屉的状态（打开/关闭）更改sideBar中组件的样式。我已经在检测导航抽屉的状态，并使用componentDidUpdate中的道具将其传递到sideBar组件。

问题是重新渲染（根据状态更改style）太慢。

主要问题在于道具的数据，这些数据往往太迟了。

这是导航抽屉的代码

export const Drawer = createDrawerNavigator(
{
Home: { screen: HomeNavigator },
Anatomy: { screen: Anatomy },
Header: { screen: Header },
Footer: { screen: Footer },
NHBadge: { screen: NHBadge }
},
{
initialRouteName: "Home",
drawerLockMode: 'locked-closed',
drawerPosition: 'right',
drawerWidth: 300,
drawerBackgroundColor: 'rgba(255, 255, 255, .9)',
contentComponent: props => <SideBar {...props}/>,
contentOptions: {
  activeTintColor: '#fff',
  activeBackgroundColor: '#e91e63',
}
}
);

这是SideBar组件的代码

class SideBar extends Component {
constructor(props) {
super(props);
this.state = {
  shadowOffsetWidth: 1,
  shadowRadius: 4,
  isOpened: false
};
}

componentDidUpdate(prevProps) {
const isDrawerOpen = this.props.navigation.state.isDrawerOpen;
const wasDrawerOpen = prevProps.navigation.state.isDrawerOpen;

if (!wasDrawerOpen && isDrawerOpen) {
  this.setState({ isOpened: true })
}
else if (wasDrawerOpen && !isDrawerOpen) {
  this.setState({ isOpened: false })
}
}


render() {
const isDrawerOpen = this.props.navigation.state.isDrawerOpen;
console.log(isDrawerOpen)
return (
  <Container>
    <View style={styles.drawerCover} />
    {this.state.isOpened && <Image square style={styles.drawerImage} source={drawerImage} />}

    <Content
      bounces={false}
      style={{ flex: 1, backgroundColor: "#fff", top: -1 }}
    >

      <List
        dataArray={datas}
        renderRow={data =>
          <ListItem
            button
            noBorder
            onPress={() => this.props.navigation.navigate(data.route)}
          >
            <Left>
              <Icon
                active
                name={data.icon}
                style={{ color: "#777", fontSize: 26, width: 30 }}
              />
              <Text style={styles.text}>
                {data.name}
              </Text>
            </Left>
            {data.types &&
              <Right style={{ flex: 1 }}>
                <Badge
                  style={{
                    borderRadius: 3,
                    height: 25,
                    width: 72,
                    backgroundColor: data.bg
                  }}
                >
                  <Text
                    style={styles.badgeText}
                  >{`${data.types} Types`}</Text>
                </Badge>
              </Right>}
          </ListItem>}
      />
    </Content>
  </Container>
);
}
}

Answer 1

我找到了一个解决方案，想与任何可能遇到相同问题的人分享。

我更改了跟踪导航抽屉状态的方式，并且工作顺利

sum

如何使组件在React-Native中更快地重新渲染？

1 个答案: