我之前在Expo iOS项目里也踩过这个坑，Modal里的TextInput经常因为一些容易忽略的样式或层级细节导致内容看不到，咱们来一步步解决：

常见原因及解决方案 #

1. 文字颜色与背景色对比度不足 #

默认情况下，TextInput的占位符颜色可能偏浅，加上Modal的背景（比如半透明或深色），就会导致看不到。咱们显式设置文字颜色和占位符颜色：

• 给TextInput添加color="#000"（设置输入文字颜色）
• 添加placeholderTextColor="#999"（设置占位符颜色）

2. Modal或父容器背景未明确设置 #

iOS的Modal默认可能带有半透明效果，或者父View没有背景色，导致TextInput的内容和背景融合。可以：

• 给Modal设置transparent={false}（如果不需要透明效果）
• 给包裹TextInput的inputView添加明确的背景色，比如backgroundColor="#ffffff"

3. TextInput样式缺失必要的内边距或高度设置 #

有时候虽然设置了高度，但没有内边距，文字会贴着边缘被截断，或者高度不够导致文字显示不全：

• 给TextInput添加paddingVertical: 8和paddingHorizontal: 12，确保有足够的内边距
• 确认height设置合理，比如height: 44（符合iOS控件的常规高度）

4. 检查是否有层级覆盖问题 #

确保Modal内的View没有设置overflow: hidden或者其他会截断TextInput的属性，也不要让其他组件（比如按钮）覆盖了TextInput区域。

修改后的代码示例 #

<Modal visible={props.visible} transparent={false}>
  <View style={styles.inputView}>
    <TextInput
      placeholder="Course Goal"
      style={styles.input}
      onChangeText={(enteredGoal) => setGoalHandler(enteredGoal)}
      value={enteredGoal}
      color="#000" // 显式设置输入文字颜色
      placeholderTextColor="#999" // 显式设置占位符颜色
    />
    <View style={styles.inputButtons}>
      <View style={styles.button}>
        <Button title="Cancel" color="red" onPress={props.changeModal} />
      </View>
      <View style={styles.button}>
        <Button
          title="Add"
          onPress={() => {
            props.onAddGoal(enteredGoal);
            setEnteredGoal('');
          }}
        />
      </View>
    </View>
  </View>
</Modal>

// 对应的样式示例（补充关键属性）
const styles = StyleSheet.create({
  inputView: {
    backgroundColor: '#fff', // 明确设置背景色
    padding: 16,
    marginTop: 'auto', // 可选：让输入框固定在底部，符合iOS模态框习惯
    marginBottom: 'auto',
  },
  input: {
    height: 44, // 合理的高度
    borderColor: '#ccc',
    borderWidth: 1,
    borderRadius: 8,
    paddingVertical: 8,
    paddingHorizontal: 12, // 内边距确保文字不被截断
    marginBottom: 16,
  },
  inputButtons: {
    flexDirection: 'row',
    justifyContent: 'flex-end',
    gap: 12,
  },
  button: {
    // 按钮样式按需调整
  },
});

如果以上方法还没解决，可以试试清除Expo缓存（expo r -c），或者检查你的Expo SDK版本，升级到最新稳定版，有时候旧版本会有这类兼容性bug。

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