如何在React Native联系页面实现多个联系人列表展示？

解决方案 #

核心逻辑是把原有的单联系人全局变量调整为数组结构，再遍历数组渲染每一个联系人条目即可，具体实现步骤如下：

• 第一步：调整全局联系人数据结构
  将原来单个的联系人变量替换为数组格式：

// 原有的单联系人定义可废弃
// GLOBALS.CONTACT_NAME = 'XXX'
// GLOBALS.CONTACT_NUMBER = 'XXX'

// 新的多联系人数组结构
GLOBALS.CONTACTS = [
  { name: '联系人1', number: '13xxxxxxxxx' },
  { name: '联系人2', number: '13xxxxxxxxx' },
  // 按实际需求添加更多联系人
]

• 第二步：调整渲染逻辑，可根据联系人数量二选一实现

  1. 少量联系人场景（10个以内）：直接用数组map方法遍历渲染
     代码如下：

  {this.state.display && GLOBALS.CONTACTS.map((contact, index) => (
    <TouchableOpacity 
      key={index} // 若联系人有唯一ID，建议替换ID作为key避免渲染异常
      style={styles.button} 
      onPress={() => this.sms(contact)} // 将当前点击的联系人信息传递给发短信方法
    >
      <Text style={{fontSize: 25}}>{contact.name}</Text>
      <Text style={{fontSize: 25}}>{contact.number}</Text>
    </TouchableOpacity> 
  ))}
  

  同时需要调整sms方法接收联系人参数：

  sms = (targetContact) => {
    // 替换原有逻辑中的全局号码为targetContact.number即可
    console.log('发送短信给：', targetContact.name, targetContact.number)
  }
  

  2. 大量联系人场景：使用React Native官方FlatList组件实现，性能更高，自带滚动、复用渲染等优化
     首先导入组件：

  import { FlatList, TouchableOpacity, Text } from 'react-native'
  

  渲染逻辑替换为：

  {this.state.display && (
    <FlatList
      data={GLOBALS.CONTACTS}
      keyExtractor={(item, index) => index.toString()} // 有唯一ID优先用ID
      renderItem={({item}) => (
        <TouchableOpacity 
          style={styles.button} 
          onPress={() => this.sms(item)}
        >
          <Text style={{fontSize: 25}}>{item.name}</Text>
          <Text style={{fontSize: 25}}>{item.number}</Text>
        </TouchableOpacity>
      )}
    />
  )}
  

内容的提问来源于stack exchange，提问作者jrcrenn