如何阻止React Native Text Input输入长文本时自动换行？

你可以根据实际场景选择以下两种方案实现需求：

方案1：使用默认单行模式（推荐） #

TextInput默认是单行输入模式（multiline={false}），这种模式下文本不会自动换行，超出输入框宽度的内容可通过横向滚动查看。

import { TextInput } from 'react-native';

<TextInput
  placeholder="请输入内容"
  scrollEnabled={true} // 允许横向滚动
  style={{
    width: '100%',
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
  }}
/>

方案2：启用multiline但强制不换行 #

如果因业务需求必须开启multiline={true}，可通过样式和属性组合强制文本单行显示：

import { TextInput } from 'react-native';

<TextInput
  placeholder="请输入内容"
  multiline={true}
  numberOfLines={1} // 限制显示行数为1
  scrollEnabled={true} // 开启横向滚动
  style={{
    width: '100%',
    borderWidth: 1,
    borderColor: '#ccc',
    padding: 10,
    whiteSpace: 'nowrap', // 强制文本不换行
  }}
/>

关键说明 #

• whiteSpace: 'nowrap'是核心样式，强制文本始终在一行展示，不会自动换行。
• scrollEnabled={true}确保文本超出输入框宽度时，用户可以滑动查看完整内容。
• 优先选择方案1，默认单行模式的性能和交互体验更优。

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