垂直对齐Icon和TextInput

Question

我正在尝试将TextInput与Icon垂直对齐，我尝试了各种样式规则，但它不起作用。在iOS中，布局是正确的，但在Android元素中没有垂直对齐。

<View style={styles.headerContainer}>
  <TextInput
    style={styles.input}
    autoCorrect={false}
    onChangeText={(value) => this.setState({ searchTextInputVal: value })}
    returnKeyType="search"
    placeholder="Type Here..."
    value={this.state.searchTextInputVal}
    underlineColorAndroid="transparent"
  />
  <Icon
    size={25}
    style={[styles.icon, styles.searchIcon]}
    name="search"
    color={Colors.grey}
  />
  <Icon
    size={25}
    style={[styles.icon, styles.clearIcon]}
    name="close"
    onPress={this.onClearTextInput.bind(this)}
    color={Colors.grey}
  />
</View>

input: {
    paddingLeft: 35,
    paddingRight: 19,
    margin: 8,
    borderRadius: 3,
    overflow: 'hidden',
    borderColor: Colors.grey,
    borderWidth: 1,
    fontSize: 16,
    color: Colors.darkBlue,
    height: 40,
    ...Platform.select({
      ios: {
        height: 40,
      },
      android: {
        borderWidth: 0,
      },
    }),
  },
  searchIcon: {
    left: 16,
    color: Colors.grey,
  },
  clearIcon: {
    right: 16,
    color: Colors.grey,
  },

Answer 1

android中的TextInput组件默认有一些paddings＆amp;边距，添加到您在输入样式中设置的边距。如果使用“切换检查器”选项，则可能会看到它们。

Answer 2

我没注意到我有另一种风格：

icon: {
    backgroundColor: 'transparent',
    position: 'absolute',
    color: 'white',
    top: 15.5,
    ...Platform.select({
      android: {
        top: 20,
      },
    }),
  },

当我删除时：

top: 15.5,
        ...Platform.select({
          android: {
            top: 20,
          },
        }),

并添加：justifyContent: 'center'，现在可以使用了。