我有以下代码:

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


输出以下屏幕:

javascript - 减少高度和垂直填充的 react  native TextInput-LMLPHP

我的目标是减小TextInput的高度。看起来也有一些垂直填充。是否可以减少它?我只是想节省屏幕空间,我认为这占用了很多空间。

编辑01

我尝试使用以下样式:

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


但是没有用,因为我得到了以下结果:

javascript - 减少高度和垂直填充的 react  native TextInput-LMLPHP

如您所见,它看起来并不好(很明显)。

谢谢!

最佳答案

在样式中添加heightjustifyContent

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

关于javascript - 减少高度和垂直填充的 react native TextInput,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54859289/

10-10 20:38