React Native Text 超出显示省略号并支持左右滚动

在 React Native 开发中，经常会遇到 Text 组件内容超出容器宽度的情况。为了提升用户体验，通常需要将超出部分隐藏并显示省略号，同时允许用户通过左右滚动查看完整内容。

以下代码展示了如何使用 ScrollView 和 Text 组件实现这一效果：javascriptimport React from 'react';import { ScrollView, Text, StyleSheet } from 'react-native';

const ScrollableText = () => { return ( This is a long text that will be hidden if it exceeds the width of the container. This text can be scrolled horizontally. );};

const styles = StyleSheet.create({ container: { padding: 10, }, text: { fontSize: 16, color: 'black', },});

export default ScrollableText;

代码解析：

ScrollView 组件: - horizontal={true}: 设置为水平滚动。 - contentContainerStyle={styles.container}: 设置滚动内容区域的样式。 - showsHorizontalScrollIndicator={false}: 隐藏水平滚动条。
Text 组件: - numberOfLines={1}: 限制文本显示为单行。 - ellipsizeMode='tail': 设置超出部分显示省略号 (...)，并显示在文本末尾。
样式: - styles.container: 设置滚动内容区域的内边距。 - styles.text: 设置文本字体大小和颜色。

通过以上代码，即可实现 React Native 中 Text 组件超出显示省略号并支持左右滚动的效果。你可以根据自己的需求调整样式和内容。