React Native Nativebase：如何将Picker及下拉箭头按钮右对齐？

我清楚你想要让NativeBase的Picker组件和它的下拉箭头在inlineLabel布局中靠右对齐的需求，咱们可以通过调整样式属性来实现这个效果，以下是修改后的完整代码和关键说明：

<Form>
  <Item inlineLabel>
    <Label>Name *</Label>
    <Input 
      autoFocus 
      type="text" 
      onChangeText={text => this.setState({ name: text })} 
      value={this._replaceSpace(this.state.name)} 
      placeholderTextColor="#BFC6EA" 
      placeholder='Grilled Chicken' 
      style={{ textAlign: 'right', marginRight: 10 }} 
    />
  </Item>
  <Item inlineLabel style={{ justifyContent: 'space-between', alignItems: 'center' }}>
    <Label>Serving Per Container *</Label>
    <Picker 
      mode="dropdown" 
      iosHeader="Select your SIM" 
      iosIcon={<Icon name="arrow-down" style={{ position: 'absolute', right: 5 }} />} 
      style={{ width: '60%', textAlign: 'right' }} 
      selectedValue={this.state.selected} 
      onValueChange={this.onValueChange.bind(this)} 
    >
      <Picker.Item label="Wallet" value="key0" />
      <Picker.Item label="ATM Card" value="key1" />
      <Picker.Item label="Debit Card" value="key2" />
      <Picker.Item label="Credit Card" value="key3" />
      <Picker.Item label="Net Banking" value="key4" />
    </Picker>
  </Item>
</Form>

关键修改点说明： #

• 给包含Picker的<Item>添加了style={{ justifyContent: 'space-between', alignItems: 'center' }}：这个样式让Label和Picker分别占据布局的左右两端，保证Label左对齐，Picker区域靠右侧。
• 调整Picker的style：设置width: '60%'来控制Picker的宽度（你可以根据实际需求调整这个比例），同时添加textAlign: 'right'让Picker的选项文本靠右对齐。
• 修改iosIcon的样式：通过position: 'absolute', right: 5把下拉箭头固定在Picker的右侧边缘，和文本的右对齐效果匹配。

如果是Android平台，NativeBase的Picker箭头默认会跟随Picker的对齐方式，所以上述调整也能适配Android端的显示效果。

内容的提问来源于stack exchange，提问作者Millenial2020