Уменьшить высоту и отступ по вертикали для TextInput из оригинальной бумаги

Question

У меня есть следующий код:

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,
}

но не сработало, потому что я получил следующий результат:

, который, как вы можете видеть, не 'Выглядит хорошо (очевидно).

Спасибо!

Answer 1

добавить height и justifyContent в стиле

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

Answer 2

Как видно из исходного кода, вы можете изменить только размер входного файла, изменив опору рендеринга

Answer 3

Вы можете установить высоту для него, если хотите:

<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 какой-нибудь пользовательский текст ввода.Они могут иметь то, что вам нужно.Удачи!