如何在 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

为什么不只连接字符串并保留一个

Text

，例如：

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

Answer 2

如果

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>