Как сделать повторный рендеринг компонентов в Reaction-native быстрее? - PullRequest
Новая
       68

Как сделать повторный рендеринг компонентов в Reaction-native быстрее?

0 голосов
/ 06 февраля 2020

Я пытаюсь изменить стиль компонента в боковой панели в зависимости от состояния навигационной панели (открыт / закрыт). Я уже определяю состояние ящика навигации и передаю его компоненту 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>
);
}
}

1 Ответ

0 голосов
/ 06 февраля 2020

Я нашел решение, которым хотел бы поделиться со всеми, у кого может быть такая же проблема.

Я изменил способ отслеживания состояния навигационного ящика, и он работает гладко 

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