减少 react-native-paper TextInput 的高度和垂直填充
Posted
技术标签:
【中文标题】减少 react-native-paper TextInput 的高度和垂直填充【英文标题】:Reduce height and vertical padding for a 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,
但是没有用,因为我得到了以下结果:
如您所见,看起来不太好(很明显)。
谢谢!
【问题讨论】:
【参考方案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 />
【讨论】:
以上是关于减少 react-native-paper TextInput 的高度和垂直填充的主要内容,如果未能解决你的问题,请参考以下文章
npm install react-native-paper 期间的问题
React Native:图像 URI 不适用于发布 apk