如何在React Native中对齐文本和Picker

问题描述

我们如何在React Native中将文本对齐到输入旁边?在下面的图像中，文本位于左上方，但选择器似乎已应用了填充或边距.我尝试了使用flex的其他解决方案，但是遇到了这个问题

How do we align a Text to be next to an Input in React Native? In the image below the Text is in the top left but the Picker seems to have padding or margin applied. I tried other solutions with flex but also ran into this problem

推荐答案

我的选择器也有类似的问题.给text和picker都相等的flex(例如:parent具有flex:1，给text和picker都赋予flex:0.5).最好根据屏幕大小为选择器提供高度和宽度.我认为您没有为该父视图提供 flexDirection (行).并且还将项目的高度和宽度提供给选择器.

I have a similar problem with the picker. Give equal flex for both text and picker(eg: parent have flex: 1 and give flex: 0.5 to both text and picker ). Better to give height and width to the picker according to your screen size. I think you didn't give flexDirection(row) to that the parent View. And also give height and width for items to the picker.

为选择器提供样式的示例代码:

Sample code for giving style to picker:

    <Picker
        style={styles.picker}
        mode="dropdown"
        itemStyle={styles.itemStyle}>
            <Item label="1 Hr" value="1" />
            <Item label="4 Hrs" value="4" />
            <Item label="8 Hrs" value="8" />
            <Item label="16 Hrs" value="16" />
            <Item label="24 Hrs" value="24" />
    </Picker>

样式:

itemStyle: {
    fontSize: 15,
    height: 75,
    color: 'black',
    textAlign: 'center',
    fontWeight: 'bold'
  }
picker: {
    width: 100
  },

它为我工作.

谢谢.

这篇关于如何在React Native中对齐文本和Picker的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！