如何在 React native 中连接数组内的字符串响应？

Question

我正在访问内容列表中的一个字符串，我想用逗号连接这些字符串，但是每当我尝试这样做时，网络和移动设备的样式都会被破坏。

下面是我写的代码

<View style={{flexDirection: 'row'}}>
            {props.item.vaccine_list.map((item, i) => {
              console.log('teme', typeof item.name);
              return (
                <View
                  key={i}
                  style={
                    width > 414
                      ? {flexDirection: 'row', width: 35}
                      : {
                          flexDirection: 'row',
                          width: 30,
                        }
                  }>
                  <Text
                    style={{
                      fontFamily: 'Roboto',
                      fontSize: 12,
                      color: '#000',
                    }}>
                    {item.name + ','}
                  </Text>
                </View>
              );
            })}
          </View>

移动视图：

网络视图：

请告诉我如何修复样式并将字符串以逗号分隔值清晰地排成一行。

Answer 1

如果 props.item.vaccine_list 是您要连接的“字符串”数组，那么我建议您先映射 name 属性，然后用逗号连接它们。

props.item.vaccine_list.map(({ name }) => name).join(', ')

代码

<View style={{flexDirection: 'row'}}>
  <View
    style={
    width > 414
      ? {flexDirection: 'row', width: 35}
      : {
        flexDirection: 'row',
        width: 30,
      }}
  >
    <Text
      style={{
        fontFamily: 'Roboto',
        fontSize: 12,
        color: '#000',
      }}
    >
      {props.item.vaccine_list.map(({ name }) => name).join(', ')}
    </Text>
  </View>
</View>

Answer 2

再见，你为什么不只连接一个 Text 的字符串，例如：

<View style={{flexDirection: 'row'}}>
   <View>
      <Text>
         {props.item.vaccine_list.map(({ name }) => name).join(', ')}
      </Text>
    </View>
</View>