react native 为什么我的 textinput 文本在中间？答案

【问题标题】：react native why is my textinput text in the middle?react native 为什么我的 textinput 文本在中间？
【发布时间】：2021-07-14 11:12:51
【问题描述】：

我想制作一个多行文本区域。因此，如果我将字段的高度设置为 100，那么占位符和输入文本将居中，而不是在顶部。

我希望文本从顶部开始。

                    <View style={{flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginTop: 50}}>
                      <AntDesign name="infocirlceo" size={24} style={{backgroundColor: '#fff', padding: 10, borderRadius: 100, marginRight: 12}} color="#555" />
                      <TextInput
                        style={{padding: 10, height: 100, backgroundColor: '#fff', borderWidth: 1, width: 250, borderRadius: 8, borderColor: '#eee'}}
                        placeholder="Proudktbeschreibung eingeben"
                        multiline
                        numberOfLines={1}
                      />
                    </View>

【问题讨论】：

您尝试过哪些更改，效果如何？
试试textAlignVertical: 'top'的风格
“Produktbeschreibung”只是提示你有错别字

标签： reactjs react-native expo

【解决方案1】：

我认为 AntDesign 是导致问题的原因，由于您没有显示该组件的任何代码，因此我无法准确告诉您出了什么问题。但我可以向您展示的是如何实现您想要的外观。

在这个例子中，我在视图中使用了一个图像，而不是你的 AntDesign。这是最终结果（使用了不同的图像，因为我没有你的）

为了实现这是我写的代码

<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center', justifyContent: 'center', marginTop: 50 }}>

                    <View style={{ padding: 15, backgroundColor: '#fff',margin:10,borderRadius:100 }}>
                        <Image style={{ height: 30, width: 30 }} source={require("../../../../assets/icons/capture.png")} />

                    </View>

                    <TextInput
                        style={{ padding: 10, height: 100, backgroundColor: '#fff', borderWidth: 1, width: 250, borderRadius: 8, borderColor: '#eee' }}
                        placeholder="Proudktbeschreibung eingeben"
                        multiline
                        numberOfLines={1}
                    />
        </View>

【讨论】：