减少 react-native-paper TextInput 的高度和垂直填充答案

【问题标题】：Reduce height and vertical padding for a react-native-paper TextInput减少 react-native-paper TextInput 的高度和垂直填充
【发布时间】：2019-07-18 10:46:22
【问题描述】：

我有以下代码：

import React, { Component } from 'react';
import { View, StyleSheet } from 'react-native';
import { Button, TextInput } from 'react-native-paper';

export default class Header extends Component {

  state = {
    text: '',
  };

  render() {
    return (
      <View style={styles.container}>
        <TextInput value={this.state.text} style={styles.input} />
        <Button mode="contained" style={styles.button}>Add Todo</Button>
      </View>
    );
  }

}

const styles = StyleSheet.create({
  container: {
    flexDirection: 'row',
    justifyContent: 'center',
    alignItems: 'center',
    alignSelf: 'stretch',
    backgroundColor: '#c1deff',
  },
  input: {
    flex: 1,
  },
  button: {
    flex: 0,
  },
});

输出以下屏幕：

我的目标是降低TextInput 的高度。它看起来也有一些垂直填充。也可以减少吗？我只是想节省屏幕空间，在我看来占用了很多空间。

编辑 01

我尝试了以下样式：

input: {
  flex: 1,
  height: 40,
  borderColor: 'gray',
  borderWidth: 1,
}

但是没有用，因为我得到了以下结果：

如您所见，看起来不太好（很明显）。

谢谢！

【问题讨论】：

标签： javascript android iphone react-native expo

【解决方案1】：

在样式中添加height 和justifyContent

input: {
    flex: 1,
    height: 40,
    justifyContent:"center"
}

【讨论】：

这是救命的事情！什么都不起作用padding, margin, paddingHorizontal, paddingVertical 除了这个：/ 设置高度也可以挽救你的生命

【解决方案2】：

您可以根据需要为其设置高度：

<TextInput
    style={{height: 40, borderColor: 'gray', borderWidth: 1, justifyContent:"center"}}
     onChangeText={(text) => this.setState({text})}
    value={this.state.text}
  />

来源：https://facebook.github.io/react-native/docs/textinput

还可以尝试在 Github 中搜索一些自定义输入文本。他们可能有你需要的东西。祝你好运！

【讨论】：

试过了，但没有成功。请检查我的 Edit 01
@davidesp 已编辑。对不起，我现在无法使用笔记本电脑，我在手机上 :) 我现在无法测试任何代码来给你确定的答案
没有问题@Amas，这个问题现在已经解决了。谢谢！

【解决方案3】：

从源码可以看出，只能通过修改render prop来改变输入大小

【讨论】：

【解决方案4】：

要调整高度，请添加样式height: 40，要调整垂直填充，请添加样式paddingHorizontal: 0

您的标签应如下所示：

<TextInput value={"Something"} style={{ flex: 1, height: 40, paddingHorizontal: 0}} />

【讨论】：