如何更快地在 react-native 中重新渲染组件？

Question

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

问题是重新渲染（根据状态改变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

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

我改变了跟踪导航抽屉状态的方式，它工作顺利

componentDidUpdate(prevProps) {
if (this.props.navigation.state.drawerMovementDirection !== prevProps.navigation.state.drawerMovementDirection && this.props.navigation.state.drawerMovementDirection == "opening") {
  this.setState({ showImg: true })
}
if (this.props.navigation.state.drawerMovementDirection !== prevProps.navigation.state.drawerMovementDirection && this.props.navigation.state.drawerMovementDirection == "closing") {
  this.setState({ showImg: false })
}
}