React Native实现数组元素换行，将横向排列改为纵向展示

嘿，看你是想把数组里的联系电话从横向并排改成每个单独占一行对吧？其实搞定这个很简单，咱们从布局样式入手就行，给你几个实用的方案：

方案一：修改父容器的布局方向 #

你的CardSection组件大概率默认用了flexDirection: row的布局（这是React Native flex布局的默认值），只要把它改成纵向排列就行：

<CardSection style={{flexDirection: 'column'}}>
  <FontAwesomeIcon style={styles.contentStyle} icon={faPhone} />
  { this.state.contact.map((item, index) => (
    <TouchableOpacity key={item.id} style={styles.opacityStyle} onPress={()=>Linking.openURL(`tel:${item.name}`)}>
      <Text style={styles.contactStyle}>{item.name}</Text>
    </TouchableOpacity>
  )) }
</CardSection>

这样里面的所有子元素（包括电话图标和每个联系人项）都会自动上下排列，正好符合你的需求。

方案二：让每个联系人项独占一行 #

如果不想修改父容器的布局，也可以给每个TouchableOpacity设置宽度为100%，强制它占满整行：

先更新你的样式表：

const styles = StyleSheet.create({
  // 保留你原有的其他样式...
  opacityStyle: {
    width: '100%',
    marginVertical: 4, // 可选，加一点上下间距让排版更舒服
  },
  contactStyle: {
    // 你的原有样式，比如 fontSize: 16 之类的
  }
});

这样每个电话项都会单独占一行，自然就变成纵向排列了。

小细节优化 #

记得把Text组件里的多余空格去掉（就是原来的{item.name} 改成{item.name}），避免出现不必要的空白哦。

这两种方法都能轻松实现你要的效果，选哪个都可以，看你更倾向于调整父容器还是子元素的样式~

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