React Native Paper Outlined TextInput嵌套View后占位符异常问题

问题出在嵌套在横向布局View里的TextInput缺少宽度约束。当父容器设置flexDirection: 'row'时，子组件默认会根据内容自适应宽度，但TextInput在这种情况下没有足够的空间渲染占位文本；而外部的TextInput处于垂直布局容器中，默认占满可用宽度，因此能正常显示占位符。

解决方式 #

给嵌套的TextInput添加宽度约束，两种方案可选：

• 方案一：设置flex: 1，让它占据父容器中除Button外的剩余空间
• 方案二：设置固定宽度（比如width: 200）

修改后的代码示例 #

import * as React from 'react';
import { View, StyleSheet } from 'react-native';

import { TextInput, Badge, Button } from 'react-native-paper';

export default function App() {
  const [value, setValue] = React.useState('');
  const [dishs, setDishs] = React.useState([]);

  const isDark = false;

  const checkNumber = (array, numb) => {
    return array.findIndex(({ dish }) => dish === parseInt(numb));
  };

  const addNumber = (numb) => {
    const found = checkNumber(dishs, numb);
    if (found === -1) setDishs([...dishs, { dish: parseInt(numb), times: 1 }]);
    else {
      const clone = JSON.parse(JSON.stringify(dishs));
      clone[found].times++;
      setDishs(clone);
    }
  };

  return (
    <View style={{ flex: 1, padding: 46 }}>
      <TextInput
        dense
        mode="outlined"
        label="Dish"
        placeholder="Dish"
        keyboardType="phone-pad"
        maxLength={3}
        value={value}
        onChangeText={setValue}
        onSubmitEditing={({ nativeEvent: { text } }) => {
          setValue('');
          if (text === '' || isNaN(text)) return;
          addNumber(text);
        }}
        theme={{
          colors: {
            placeholder: isDark ? '#FFFFFF' : '#000',
            text: '#1E90FF',
            primary: '#1E90FF',
            background: isDark ? '#1B1A23' : '#EFEFEF',
          },
        }}
      />
      <View
        style={{
          marginTop: 20,
          flexDirection: 'row',
          justifyContent: 'space-between',
          alignItems: 'center',
        }}>
        {/* 添加flex:1让TextInput占据剩余空间，同时增加marginRight避免和Button挤在一起 */}
        <TextInput
          style={{ flex: 1, marginRight: 10 }}
          dense
          mode="outlined"
          label="Dish"
          placeholder="Dish"
          keyboardType="phone-pad"
          maxLength={3}
          value={value}
          onChangeText={setValue}
          onSubmitEditing={({ nativeEvent: { text } }) => {
            setValue('');
            if (text === '' || isNaN(text)) return;
            addNumber(text);
          }}
          theme={{
            colors: {
              placeholder: isDark ? '#FFFFFF' : '#000',
              text: '#1E90FF',
              primary: '#1E90FF',
              background: isDark ? '#1B1A23' : '#EFEFEF',
            },
          }}
        />
        <Button
          style={{
            backgroundColor: '#1E90FF',
            width: 160,
            height: 40,
          }}
          mode="contained">
          Send
        </Button>
      </View>
    </View>
  );
}

附异常表现动图：

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