arrays - 如何在本机反应中以单独的行显示嵌套数组中的项目？

Question

我正在使用 react-native-contacts 并且我需要在单独的行中显示属于每个人的所有数字，无论联系人姓名是否相同。我该怎么做？

例如，如果为联系人 'x' 保存了 5 个号码，我希望在 'x' 的名称下有五行，但电话号码不同。

这是我在 App.js 中的 render() ：

render() {
   return (
         {this.state.contacts.map(contact => {
            return (
              <ListItem
                key={contact.recordId}
                title={`${contact.givenName} ${
                  contact.familyName}`}
                description={contact.phoneNumbers.map(phone => (
                  <Text style={styles.phones}>
                    {phone.number} -
                  </Text>
                ))}
              />
            );
          })}

这是 ListItem.js：

import PropTypes from 'prop-types';
import {RectButton} from 'react-native-gesture-handler';
import Swipeable from 'react-native-gesture-handler/Swipeable';

class ListItem extends Component {
  static propTypes = {
    leftElement: PropTypes.element,
    title: PropTypes.string,
    description: PropTypes.string,
    rightElement: PropTypes.element,
    rightText: PropTypes.string,
    onPress: PropTypes.func,
    onDelete: PropTypes.func,
    onLongPress: PropTypes.func,
    disabled: PropTypes.bool,
  };

  renderRightAction = (iconName, color, x, progress) => {
    const trans = progress.interpolate({
      inputRange: [0, 1],
      outputRange: [x, 0],
    });

    const pressHandler = () => {
      const {onDelete} = this.props;
      if (onDelete) onDelete();
      this.close();
    };

    return (
      <Animated.View style={{flex: 1, transform: [{translateX: trans}]}}>
        <RectButton
          style={[styles.rightAction, {backgroundColor: color}]}
          onPress={pressHandler}>
          <Text style={{color: '#fff'}}>Delete</Text>
        </RectButton>
      </Animated.View>
    );
  };

  renderRightActions = progress => (
    <View style={{width: 64, flexDirection: 'row'}}>
      {this.renderRightAction('trash', '#ef5350', 64, progress)}
    </View>
  );

  renderRightActions = progress => (
    <View style={{width: 64, flexDirection: 'row'}}>
      {this.renderRightAction('trash', '#ef5350', 64, progress)}
    </View>
  );

  updateRef = ref => {
    this.swipeableRow = ref;
  };

  close = () => {
    this.swipeableRow.close();
  };

  render() {
    const {
      leftElement,
      title,
      description,
      rightElement,
      rightText,
      onPress,
      onLongPress,
      disabled,
    } = this.props;

    const Component = onPress || onLongPress ? TouchableHighlight : View;

    const {
      itemContainer,
      leftElementContainer,
      rightSectionContainer,
      mainTitleContainer,
      rightElementContainer,
      rightTextContainer,
      titleStyle,
      descriptionStyle,
    } = styles;

    return (
      <Swipeable
        ref={this.updateRef}
        friction={1}
        renderRightActions={this.renderRightActions}>
        <Component
          onPress={onPress}
          onLongPress={onLongPress}
          disabled={disabled}
          underlayColor="#f2f3f5">
          <View style={itemContainer}>
            {leftElement ? (
              <View style={leftElementContainer}>{leftElement}</View>
            ) : (
              <View />
            )}
            <View style={rightSectionContainer}>
              <View style={mainTitleContainer}>
                <Text style={titleStyle}>{title}</Text>
                {description ? (
                  <Text style={descriptionStyle}>{description}</Text>
                ) : (
                  <View />
                )}
              </View>
              <View style={rightTextContainer}>
                {rightText ? <Text>{rightText}</Text> : <View />}
              </View>

              {rightElement ? (
                <View style={rightElementContainer}>{rightElement}</View>
              ) : (
                <View />
              )}
            </View>
          </View>
        </Component>
      </Swipeable>
    );
  }
}
...
export default ListItem;

任何帮助将不胜感激。

标签： arraysreact-nativereact-native-contacts

Answer 1

对于那些寻找答案的人，我通过嵌套的 for 循环解决了这个问题，并复制了每个具有多个电话号码的联系人并将其插入到主联系人对象中：

 updateContacts(contact) {
    let reg = /(0|\+98)?([ ]|,|-|[()]){0,2}9[0|1|2|3|4]([ ]|,|-|[()]){0,2}(?:[0-9]([ ]|,|-|[()]){0,2}){8}/;

    for (let i = 0; i < contact.length; i++) {
      if (contact[i].phoneNumbers.length > 1) {
        let s = contact[i].phoneNumbers.length;
        this.setState({flag:false})

        for (let size = 0; size < s; size++) {
          let a = JSON.parse(JSON.stringify(contact));
          a[i].phoneNumbers = [contact[i].phoneNumbers[size]];

          if (reg.test(a[i].phoneNumbers[0].number)) {
            contact.splice(i, 0, a[i]);
            i = i + 1;
            this.setState({flag:true})

          }
        }
        if (this.state.flag) {
          contact.splice(i, 1);
          i = i - 1;
        }
      }
    }
    this.forceUpdate();
  }