Question

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

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

这是我在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;

任何帮助将不胜感激。

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

如何在react native中将嵌套数组中的项目显示在单独的行中？

1 个答案: