如何使用React Native元素调整输入的填充

Question

我想知道如何调整InputContainer中的填充，并剪掉下划线和文本之间的空间。

准确来说，我想将InputContainer中的padding（蓝色区域）的大小调整为0。

我尝试了很多可能的造型道具，但都不起作用。有谁知道怎么处理吗？

import React  from 'react';
import { Text, View, StyleSheet} from 'react-native';
import { Input } from 'react-native-elements'

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Question Demo</Text>
      <Input 
        leftIcon={<Text>/</Text>}
        inputContainerStyle={{
          paddingHorizontal: 0,
          paddingVertical: 0,
        }}
        inputStyle={{
          paddingHorizontal: 0,
          paddingVertical: 0, 
        }}
      />
    </View>
  );  
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
  },
});

Answer 1

错误消息的容器是此问题的罪魁祸首。您可以更新 errorStyle 来解决这个底部填充问题。

const FormInput = (props: InputProps) => {
  const [errorMessage, setErrorMessage] = useState('');
  return (
    <Input
      errorStyle={{
        height: errorMessage ? 'auto' : 0,
        margin: errorMessage ? 2 : 0
      }}
    />
  );
};