该应用程序显示速度慢，如何解决此问题？反应本机

Question

我使用React Native创建了联系人应用程序 该应用程序提示会显示按名字的首字母排序的联系人

我有如下数据数组

我想做一个重复的循环并渲染它，我已经完成了，但是我的应用程序很慢

这是我的代码

....
renderInfo = (contact, FullName, phone, givenName, background) => {
    if (this.state.displayPhoto) {
      this.GroupColor = Colors.text;
      return (
        <ListItem
          onPress={this.onContactSelected.bind(this, contact)}
          roundAvatar
          title={FullName}
          subtitle={phone}
          avatar={
            <Avatar
              size="small"
              rounded
              overlayContainerStyle={{ backgroundColor: background }}
              title={avatarLetter(givenName)}
              activeOpacity={0.7}
            />
          }
          containerStyle={{ borderBottomWidth: 0 }}
        />
      );
    } else {
      this.GroupColor = Colors.Group;
      return (
        <ListItem
          onPress={this.onContactSelected.bind(this, contact)}
          title={FullName}
          containerStyle={{ borderBottomWidth: 0 }}
        />
      );
    }
  };
  renderContact = (data,viewAs) => {
    /**
     * TODO: render better than old  one
     * FIXME: fix infinty loop
     *
     */
    return data.map((contact, index) => {
  console.log("contact",contact.givenName,index);
      const middleName = contact.middleName || "";
      const givenName = contact.givenName || "";
      const familyName = contact.familyName || "";
      let FullName;
      if(viewAs == "familyName"){
         FullName = middleName + " " + familyName + " " + givenName;
      }else{
         FullName = givenName + " " + middleName + " " + familyName;
      }

      //const avatar = item.thumbnailPath || "";
      const phone = contact.phoneNumbers[0].number;
      let i = sumChars(givenName) % defaultColors.length;
      let background = defaultColors[i];
      const leftContent = (
        <View style={styles.leftSwipeItem}>
          <Icon
            name={"phone"}
            type="font-awesome"
            size={30}
            underlayColor={"rgba(255,255,255,0)"}
            color={"#ee5253"}
          />
        </View>
      );
      const rightContent = (
        <View style={styles.rightSwipeItem}>
          <Icon
            name={"textsms"}
            size={30}
            underlayColor={"rgba(255,255,255,0)"}
            color={Colors.Group}
          />
        </View>
      );

      return [
        <Swipeable
          key={index}
          leftActionActivationDistance={100}
          leftContent={leftContent}
          rightActionActivationDistance={100}
          rightContent={rightContent}
          onLeftActionRelease={this.callContact.bind(this, phone)}
          onRightActionRelease={this.textContact.bind(this, phone)}
        >
          {this.renderInfo(contact, FullName, phone, givenName, background)}
        </Swipeable>,
        this.renderSeparator(`sepa-${index}`)
      ];
    });
  };
  // this method for render Indicator
  renderIndicator = () => {
    if (!this.props.loading) return null;
    return (
      <View
        style={{
          flex: 1,
          justifyContent: "center",
          alignItems: "center"
        }}
      >
        <ActivityIndicator
          style={{ flex: 1, alignSelf: "center" }}
          color={Colors.header}
          size="large"
        />
      </View>
    );
  };

  render() {
    return (
      <SafeAreaView style={styles.MainContainer}>
        {this.renderHeader()}
        {this.renderIndicator()}
        <View style={styles.rightList}>
          {this.props.contacts.map((data, key) => {
            if (
              this.groupRow[key] != null &&
              this.groupRow[key].y == this.props.scrolledTO
            ) {
              this.color = Colors.GroupActive;
            } else {
              this.color = Colors.Group;
            }
            return (
              <Text
                key={key}
                onPress={() => this.scrollToRow(this.groupRow[key].y)}
                style={[styles.rightText, { color: this.color }]}
              >
                {data.group}
              </Text>
            );
          })}
        </View>
        <ScrollView
          showsVerticalScrollIndicator={false}
          onMomentumScrollEnd={e => this.onScrollEnd(e)}
          onScrollEndDrag={e => this.onScrollEnd(e)}
          onScroll={({ nativeEvent }) => this.handleScroll(nativeEvent)}
          // scrollEventThrottle={16}
          ref={ref => (this.scroller = ref)}
          style={{ width: width - 20 }}
          refreshControl={
            <RefreshControl
              refreshing={this.props.refreshing}
              onRefresh={this._onRefresh}
            />
          }
        >
          <List containerStyle={styles.list}>
            {this.props.contacts.map((data, key) => {
              if (
                this.groupRow[key] != null &&
                this.groupRow[key].y == this.props.scrolledTO
              ) {
                // this.backColor = "#ffeaa7";
                this.pos = "absolute";
              } else {
                // this.backColor = "#fff";
                this.pos = "relative";
              }
              return [
                <Group
                  key={key}
                  titleStyle={{ color: this.GroupColor }}
                  name={data.group}
                  style={{
                    position: "relative",
                    top: 10,
                    backgroundColor: this.backColor
                  }}
                />,
                this.renderContact(data.children,this.state.viewAs)
              ];
            })}
          </List>
        </ScrollView>
        <FloatingMenu
          icon="user-plus"
          size={18}
          onPress={this.onClickAddContact}
        />
      </SafeAreaView>
    );
  }

我希望有一种更好的方式来查看联系人，而我的应用程序不会变慢