React Native Android：如何使TextInput显示滚动条

问题描述 #

在Android端使用React Native的多行TextInput组件时，即便内容超出输入框高度可滚动，滚动指示器也从未出现，官方文档未提及该功能的配置方法。

解决方案 #

React Native的TextInput在Android底层基于EditText实现，默认未启用滚动指示器，需通过原生属性配置开启：

方法一：直接在组件中配置Android专属属性 #

显式开启滚动并指定垂直滚动指示器：

<TextInput
  ref={ref}
  textAlignVertical="top"
  margin={5}
  flex={1}
  minHeight={60}
  autoFocus={false}
  multiline={true}
  padding={2}
  maxLength={100}
  value={noteText}
  onChangeText={setNoteText}
  placeholder={`Input text here`}
  scrollEnabled={true} // 确保滚动功能开启（多行默认已开启，显式设置更稳妥）
  android={{
    scrollIndicators: 'vertical' // 启用垂直滚动指示器
  }}
/>

方法二：通过ref设置原生属性 #

如果方法一不生效，可通过组件ref直接修改原生EditText的滚动条属性：

import { useEffect, useRef } from 'react';
import { TextInput } from 'react-native';

// ...

const ref = useRef(null);

useEffect(() => {
  if (ref.current) {
    // 设置原生EditText显示垂直滚动条
    ref.current.setNativeProps({
      scrollbars: 'vertical'
    });
  }
}, []);

// 渲染TextInput时保留原有属性，加上ref即可

说明 #

以上两种方法均针对Android端原生特性配置，iOS端的TextInput滚动指示器通常会在滚动时默认显示，无需额外配置。

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