在 React Native 中渲染逗号分隔的值字符串

Question

我正在从 JSON 中提取 {item.dosage}，它给了我以下字符串

"300gr short pasta, 2 spring onions, 50gr parmesan cheese"

我想在像这样的单独文本行中显示用逗号分隔的每种成分

   300gr short pasta
   2 spring onions
   50gr parmesan cheese

我试图在我的 JSX 中执行以下操作

{item.dosage.map((step, i) => (
        <Text>
            {i > 0 && ", "}
               {step}
        </Text>
 ))}

我收到一个关于“undefined is not a function...”的错误。

Answer 1

const str = "300gr short pasta, 2 spring onions, 50gr parmesan cheese"

...
<Text>
  {str.split(',').map((step)=> <Text>{step}{",\n"}</Text>)}
</Text>
...

// so try this way
<Text>
 {item.dosage.split(',').map((step)=> <Text>{step}{",\n"}</Text>)}
</Text>

Answer 2

乍一看，这似乎与您寻找的东西越来越接近，这样您就可以根据需要为视图提供边距..

{item.dosage.split(', ').map((step, i) => (
  <View>
      <Text>
        {i > 0 && ", "}

         {step}
      </Text>
  </View>
 ))}