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

Question

我们如何在React Native中将文本对齐到输入旁边？在下面的图像中，文本位于左上角，但Picker似乎应用了填充或边距。我尝试使用flex的其他解决方案，但也ran into this problem

Answer 1

这对我有用 -

  <View style={styles.Container}>
    <View style={{flexDirection: 'row', alignItems: 'center'}}>
      <View style={{flex:.5}}>
        <Text>Placeholder</Text>
      </View>
      <View style={{flex:.5}}>
        <Picker>
          <Picker.Item label="Java" value="java"/>
          <Picker.Item label="JavaScript" value="js"/>
        </Picker>
      </View>
    </View>
  </View>

您可以根据需要更改弹性值。

Answer 2

我的选择器有类似的问题。为文本和选择器赋予相同的flex（例如：parent有flex：1并且给文本和选择器提供flex：0.5）。最好根据您的屏幕尺寸为拾取器提供高度和宽度。我认为您没有将 flexDirection （行）提供给父View。并且还为拾取器提供物品的高度和宽度。

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

    <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
  },

它为我工作。

感谢。

Answer 3

<View style={styles.Container}>
<View style={{flexDirection: 'row', alignItems: 'center'}}>
  <View style={{flex:.5}}>
    <Text>Placeholder</Text>
  </View>
  <View style={{flex:.5}}>
    <Picker itemStyle={{textAlign:"left"}}>
      <Picker.Item label="Java" value="java"/>
      <Picker.Item label="JavaScript" value="js"/>
    </Picker>
  </View>
</View>

这对我有用。