如何更快地在 react-native 中重新渲染组件? [英] How to make component re-rendering in react-native faster?

问题描述

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

I am trying to change the style of a component in the sideBar based on the state of the navigation drawer (opened / closed). I am already detecting the state of the navigation drawer and passing it to the sideBar component using props inside componentDidUpdate.

问题是重新渲染(根据状态改变style)太慢了.

The problem is the re-rendering (change of style based on the state) is too slow.

主要问题在于道具的数据往往为时已晚.

The main problem is with the data of the props which tends to be available too late.

这里是导航抽屉的代码

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>
);
}
}

推荐答案

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

I found a solution that I wanted to share with anyone that may have the same problem.

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

I changed the way to keep track of the state of the navigation drawer and it's working smooth

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

这篇关于如何更快地在 react-native 中重新渲染组件?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！