如何在React Native Elements中调整Input组件的padding内边距

你遇到的是react-native-elements Input组件默认内置样式未被完全覆盖导致的空隙问题，按以下方案修改即可：

• 新增leftIconContainerStyle属性，重置左侧图标容器的默认内边距，这是你传入leftIcon后产生空隙的核心原因
• 给inputContainerStyle补充minHeight: 0配置，覆盖组件默认的最小高度限制
• 新增containerStyle属性重置Input最外层容器的默认内边距
• 如有需要可补充underlineStyle属性调整下划线的间距

修改后的完整代码如下：

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>}
        // 最外层容器样式重置
        containerStyle={{
          paddingHorizontal: 0,
          paddingVertical: 0,
        }}
        // 输入框容器样式重置
        inputContainerStyle={{
          paddingHorizontal: 0,
          paddingVertical: 0,
          minHeight: 0, // 覆盖组件默认最小高度
        }}
        // 左侧图标容器样式重置
        leftIconContainerStyle={{
          paddingHorizontal: 0,
          paddingVertical: 0,
          marginHorizontal: 0,
          marginVertical: 0,
        }}
        // 输入文本样式重置
        inputStyle={{
          paddingHorizontal: 0,
          paddingVertical: 0, 
          marginHorizontal: 0,
          marginVertical: 0,
          minHeight: 0,
        }}
        // 下划线样式可选调整
        underlineStyle={{
          margin: 0
        }}
      />
    </View>
  );  
}

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

如果还有残留空隙，可给leftIcon对应的Text元素也添加样式，把margin和padding设为0即可。

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