Expo应用中TextInput占位符不显示但Web端正常的问题求助

以下是几个实用的排查和解决方向：

1. 显式设置占位符颜色 #

最常见的原因是占位符颜色和输入框背景色重合，导致肉眼不可见。直接给TextInput添加placeholderTextColor属性指定明显的区分色：

<TextInput
  style={styles.searchInput}
  value={searchText}
  onChangeText={setSearchText}
  placeholder="Search for jobs"
  placeholderTextColor="#888" // 按需调整颜色深浅
/>

2. 用useState管理输入值 #

当前代码里value硬编码为空字符串""，部分Expo环境下可能触发渲染异常。改用React状态管理输入值：

import { useState } from 'react'

// ...

const Welcome = () => {
  const router = useRouter();
  const [searchText, setSearchText] = useState(""); // 添加状态变量

  return (
    // ...
    <TextInput
      style={styles.searchInput}
      value={searchText}
      onChangeText={setSearchText} // 绑定状态更新逻辑
      placeholder="Search for jobs"
      placeholderTextColor="#888"
    />
    // ...
  )
}

3. 检查输入框样式冲突 #

打开welcome.style.js，排查searchInput的样式：

• 确认没有设置opacity: 0这类会隐藏文本的属性
• 检查color是否和输入框背景色一致（比如背景白色+文字白色）
• 验证父容器searchWrapper/searchContainer没有设置overflow: hidden或裁剪布局，避免占位符被遮挡

4. 升级Expo/React Native版本 #

部分旧版本的Expo存在TextInput占位符的渲染bug，运行expo upgrade升级到最新稳定版，大概率能解决兼容性问题。

5. 排查自定义字体问题 #

如果项目使用了自定义字体，可能占位符未正确加载字体导致显示异常。可以给TextInput显式指定系统字体（比如fontFamily: 'system'），或者确保自定义字体在移动端已正确配置加载。

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