Javascript 如何在本机反应中正确对齐文本输入？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/29560065/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to align text input correctly in react native?
提问by Vikramaditya
The Text input is center aligned, how to fix this text input so that it takes input from top left corner
文本输入居中对齐，如何修复此文本输入以使其从左上角输入
Here is my css for text input
这是我用于文本输入的 css
/* The Text input is center aligned, how to fix this text input so that it takes input from top left corner */
input: {
flex: 1, padding: 4, marginRight: 1, marginTop: 5, fontSize: 18, borderWidth: 1, borderRadius: 4, borderColor: '#E6E5ED', backgroundColor: '#F8F8F9', justifyContent: 'flex-start', height: 150
}
回答by
I had the same issue, but the above notes didn't solve it. There's an android-onlystyle property textAlignVerticalthat fixes this issue on multiline inputs.
我有同样的问题，但上面的注释没有解决它。有一个android-only样式属性textAlignVertical可以修复多行输入上的这个问题。
i.e. textAlignVertical: 'top'
IE textAlignVertical: 'top'
回答by aseel
I have found the solution that in Android, TextInput style textAlignVertical: 'top'works. but in ios, TextInput prop multiline={true}works.
我找到了在 Android 中 TextInput 样式textAlignVertical: 'top'有效的解决方案。但在 ios 中， TextInput 道具multiline={true}有效。
回答by Tarik Chakur
TextInput has default padding, override it by setting:
TextInput 具有默认填充，通过设置覆盖它：
paddingTop: 0,
paddingBottom: 0
回答by Mahendra Liya
I had a similar use case in my iOS app, wherein the TextInput's height was 100 and the placeholder was showing in middle. I used multiline={true}and it made the text appear from the top. Hope that helps.
我的 iOS 应用程序中有一个类似的用例，其中TextInput的高度为 100，占位符显示在中间。我使用了multiline={true}它，它使文本从顶部出现。希望有帮助。
回答by Sukshith S
Give textAlignVertical : "top"that will solve your issue.
给textAlignVertical : "top"这将解决你的问题。
<TextInput placeholder="Your text post" multiline={true} numberOfLines={10}, maxLength={1000} style={{ borderWidth: 1, backgroundColor: "#e3e3e3", textAlignVertical : "top" }} />
回答by Colin Ramsay
Update 2015-07-03: multiline text inputs have now been merged:
2015-07-03 更新：多行文本输入现已合并：
https://github.com/facebook/react-native/pull/991
https://github.com/facebook/react-native/pull/991
The multiline examplesthat ship with React Native in the UI Explorer should work as documented.
UI 资源管理器中 React Native 附带的多行示例应该按照文档工作。
The problem you'll have is that multiline TextInput aren't working correctly yet, and the docs are misleading. Please see this Github issue:
您将遇到的问题是多行 TextInput 尚未正常工作，并且文档具有误导性。请参阅此 Github 问题：
https://github.com/facebook/react-native/issues/279
https://github.com/facebook/react-native/issues/279
"We haven't ported that functionality to open source yet."
“我们还没有将该功能移植到开源中。”
There is some code in that issue that gives minimal multiline functionality, so you might be able to get it working with that.
该问题中有一些代码提供了最少的多行功能，因此您可以使用它。
回答by Andrey Patseiko
It worked for me (RN 0.61.5):
它对我有用（RN 0.61.5）：
<TextInput style={{textAlignVertical:'top', paddingTop: 0, paddingBottom:0 }} />
回答by user9806259
import { Dimensions} from 'react-native';
const screenWidth = Math.round(Dimensions.get('window').width);
const screenHeight = Math.round(Dimensions.get('window').height);
// ...
intext: {
height:screenHeight - 10,
textAlignVertical: 'top',
fontSize:17,
padding:12,
fontFamily:'courier',
margin:10,
},
回答by ishab acharya
Just Incase you are looking for code:
以防万一您正在寻找代码：
<TextInput
placeholder={'comment goes here!'}
multiline
style={{textAlignVertical:'top', ...otherStyle}}
/>
回答by Artur Eshenbrener
To get text aligned vertically center on both platforms use:
要在两个平台上垂直居中对齐文本，请使用：
For android use textAlignVertical: "center"
安卓使用 textAlignVertical: "center"
For ios use justifyContent: "center"
供ios使用 justifyContent: "center"
