React Native Picker与文本输入框对齐样式调整问题

我之前也碰到过NativeBase Picker这个恼人的对齐问题！其实NativeBase的组件很多都自带了封装好的内部样式，直接给Picker加普通的style属性经常不生效，得用它专属的样式props来调整，结合外层布局优化，就能搞定对齐问题。下面是具体的解决步骤：

1. 用NativeBase专属props修改Picker的内部样式 #

NativeBase的Picker把容器样式和选项文本样式分开了，要分别通过containerStyle和itemStyle来设置：

<View style={{ flex: 1, flexDirection: 'row', alignItems: 'center' }}>
  <View style={{ flex: 0.2 }}>
    <Picker
      note
      selectedValue={this.state.phoneCountry}
      // 修正setState的语法错误，对象属性需用冒号
      onValueChange={(value) => this.setState({ phoneCountry: value })}
      // 消除Picker容器默认的上下内边距，缩小垂直空间
      containerStyle={{ paddingVertical: 0, paddingHorizontal: 4 }}
      // 把选项文本改成左对齐，和Input的文本对齐
      itemStyle={{ textAlign: 'left' }}
    >
      <Picker.Item label="US +1" value="us" />
      {/* 其他选项 */}
    </Picker>
  </View>
  <View style={{ flex: 0.8 }}>
    <Input
      keyboardType='number-pad'
      // 修正状态更新方式，不能直接赋值this.state
      onChangeText={(text) => this.setState({ phone: text })}
      // 统一Input的垂直内边距，和Picker保持一致
      containerStyle={{ paddingVertical: 0 }}
    />
  </View>
</View>

2. 外层布局添加垂直对齐属性 #

给最外层的row方向View加上alignItems: 'center'，这样Picker和Input组件会在垂直方向居中对齐，避免因为组件自身默认高度不同导致的错位。

3. 修正状态更新的错误写法 #

顺便提一句，你原来的代码里有两处状态更新的错误：

• this.setState({ phoneCountry = value }) 应该改成 this.setState({ phoneCountry: value })（对象属性要用冒号而非等号）
• onChangeText={text => {this.state.phone = text}} 不能直接修改this.state，必须用setState，否则React不会触发组件重新渲染，输入的内容也不会同步到状态里。

这样调整之后，Picker的文本应该能和Input的文本完美对齐了！

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