反应本机react-native-paper textInput在视图内概述了奇怪的

问题描述 投票:0回答:1

视频链接:视频

正如您从一开始看到的奇怪行为,您看不到占位符文本。

可以正确看到它,而不是在与上面相同的输入字段中但在视图中找不到。

你能告诉我哪里错了吗?

您也可以使用 android expo 模拟器尝试一下: https://snack.expo.dev/exQQvm0ve

代码:

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',
        }}>
        <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',
            },
          }}
        />
        <Button
          style={{
            backgroundColor: '#1E90FF',
            width: 160,
            height: 40,
          }}
          mode="contained">
          Send
        </Button>
      </View>
    </View>
  );
}

javascript react-native textinput react-native-paper react-native-textinput
1个回答
0
投票

遇到同样的问题,只需删除占位符道具即可工作,仅保留标签。

  <TextInput
      dense
      mode="outlined"
      label="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',
        },
      }}
    />
© www.soinside.com 2019 - 2024. All rights reserved.