Expo React Native条码扫描器：扫描结果换行显示问题求助

问题 #

使用Expo开发React Native条码/QR扫描应用，扫描功能正常，但展示扫描结果时遇到问题：返回的data字符串包含多个以分号结尾的属性，目前被显示为单行。尝试用正则将分号替换为换行符（{data.replace(/;/g, "\n")}），并给Text组件设置whiteSpace: "pre-line"样式，但未生效，需要实现按属性换行显示。

相关代码：

useEffect(() => {
const getBarCodeScannerPermissions = async () => {
  const { status } = await BarCodeScanner.requestPermissionsAsync();
  setHasPermission(status === "granted");
};
getBarCodeScannerPermissions();
}, []);

const handleBarCodeScanned = ({ type, data }) => {  //data parsed from the Qr code
setObjectValue (data,type)
setScanned(true);
setData(data)
setMainModal(true)
 };

return (
<View style={styles.container}>
  <BarCodeScanner
    onBarCodeScanned={scanned ? undefined : handleBarCodeScanned}
    style={[StyleSheet.absoluteFillObject, styles.minicontainer]}
  />
   <MainModal>   //modal popup containing the scanned QRinformation to be shown
  <Text style={{ whiteSpace: "pre-line" }}>
  {data.replace(/;/g, "\n")}
  </Text>
 </MainModal>
</View>
 )

解决方案 #

方法1：拆分字符串为多个Text元素 #

React Native的Text组件对换行的处理和Web存在差异，直接拆分字符串生成独立的Text元素是最稳妥的方式：

// 先按分号拆分数据，过滤掉空内容
const parsedItems = data.split(';').filter(item => item.trim());

// 渲染时遍历生成每行文本
<MainModal>
  {parsedItems.map((item, idx) => (
    <Text key={idx} style={{ marginVertical: 2 }}>{item.trim()}</Text>
  ))}
</MainModal>

方法2：替换为\r\n触发换行 #

部分React Native环境中，单独的\n可能无法触发换行，替换成\r\n试试：

<MainModal>
  <Text>{data.replace(/;/g, "\r\n")}</Text>
</MainModal>

方法3：显式设置文本行高 #

如果样式缺失导致换行不生效，给Text组件添加行高样式：

<MainModal>
  <Text style={{ lineHeight: 20, fontSize: 14 }}>
    {data.replace(/;/g, "\n")}
  </Text>
</MainModal>

方法4：检查MainModal的样式限制 #

如果MainModal内部有强制单行、overflow: hidden或flex布局限制，会导致文本无法换行。检查并调整MainModal的样式，确保内部文本容器允许换行，比如添加flexWrap: 'wrap'或移除单行限制。

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