我有以下代码:
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,
}
但是没有用,因为我得到了以下结果:
如您所见,它看起来并不好(很明显)。
谢谢!
最佳答案
在样式中添加height
和justifyContent
input: {
flex: 1,
height: 40,
justifyContent:"center"
}
关于javascript - 减少高度和垂直填充的 react native TextInput,我们在Stack Overflow上找到一个类似的问题:https://stackoverflow.com/questions/54859289/