设置React Native选择器的样式以与文本输入对齐

Question

我试图将用户选择电话国家代码的选择器与用户输入电话号码的文本输入对齐。我正在使用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，但是这些似乎都不是问题的根源，因为更改它们并不会在选择器中移动文本。

Answer 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>

为帮助您，我尝试了此代码，下面是输出：