样式化 React Native 选择器以与文本输入对齐答案

【问题标题】：Styling a React Native picker to align with text input样式化 React Native 选择器以与文本输入对齐
【发布时间】：2019-01-19 06:49:51
【问题描述】：

我正在尝试将用户选择电话国家代码的选择器与用户输入电话号码的文本输入对齐。我使用的是 NativeBase 组件，但我认为这与标准的 React Native 组件相似。

<View style={{ flex: 1, flexDirection: 'row' }}>
  <View style={{ flex: 0.2 }}>
    <Picker note selectedValue={this.state.phoneCountry}
      onValueChange={value => {this.setState({ phoneCountry = value })}}>
      <Picker.Item label="US +1" value="us" />
      // other items ....
    </Picker>
  </View>
  <View style={{ flex: 0.8 }}>
    <Input keyboardType='number-pad' onChangeText={text => {this.state.phone = text}} />
  </View>
</View>

这是输出的样子（包括以前的输入字段和标签以便更好地查看）：

我遇到的问题是，在选择器中，有一个填充使文本与并排的输入不对齐。似乎文本也位于选择器的中心。我尝试更改项目中两个选择器的样式以更改 textAlign、padding 和 margin 但这些似乎都不是问题的根源，因为更改它们不会移动选择器中的文本.

【问题讨论】：

你能分享一下它的截图吗？
完成，添加了上下文截图

标签： react-native native-base

【解决方案1】：

要对齐选取器项中的文本，您应该使用 itemStyle 的 textAlign 属性，如下所示：

<View style={{ flex: 1, flexDirection: 'row' }}>
        <View style={{ flex: 0.2 }}>
          <Picker
            itemStyle={{ color: 'red', textAlign: 'left' }}
            selectedValue={this.state.phoneCountry}
            onValueChange={value => { this.setState({ phoneCountry : value }) }}>
            <Picker.Item label="US +1" value="us" />
          </Picker> 
          </View>
      </View>

只是为了帮助你，我尝试了这段代码，下面是输出：

【讨论】：