React Native元素输入框全宽

Question

我尝试实现React Native Elements中的Input组件，即蓝色的组件。我想让Input组件在红色视图中具有完整的宽度。

所以我分别使用了 "width: '100%'", "marginHorizontal: 0"，"padding: 0"和"alignItems: 'stretch'"，但是它们都没有起作用。问题出在哪里？

以下是屏幕截图： 这是对应的代码。

    <View style = {styles.campusInputView}>
      <Input
        containerStyle = {styles.campusInputContainer}
        inputStyle = {styles.campusInput}
        placeholder = 'KAIST'
        editable = {false}
      />
    </View>

使用样式

  campusInputView: {
    borderWidth: 1,
    borderColor: 'red',
    position: 'absolute',
    top: height * 100 / 640,
    left: width * 45 / 360,
    width: width * 270 / 360,
  },
  campusInputContainer: {
    borderWidth: 1,
    borderColor: 'green',
    alignItems: 'stretch',
  },
  campusInput: {
    borderWidth: 1,
    borderColor: 'blue',
    flex: 1,
    fontFamily: 'NanumSquareB',
    fontSize: 20,
    paddingVertical: 0,
  },

- TonyWild

Answer 1

将 containerStyle 的 paddingHorizontal 属性设置为 0 可以使输入框变成全宽。 只将 padding 属性设置为 0 是不够的。

import { Input } from 'react-native-elements'

<Input
  containerStyle = {{ paddingHorizontal: 0 }}
  // other settings
/>

- asukiaaa

---

哇，这一定是被接受的答案...我不知道为什么当我覆盖padding时它不起作用，但当我尝试使用paddingHorizontal时它完美地工作了！！ - Ghyath Darwish

我同意，这应该是个被接受的回答。 - ALFmachine

Answer 2

你应该在 campusInputContainer 中添加 paddingHorizontal: 0。

campusInputContainer: {
  borderWidth: 1,
  borderColor: 'green',
  alignItems: 'stretch',
  paddingHorizontal: 0
},

- Paweł Łukaszewicz

Answer 3

你想要的 宽度 是 100%。我将 边框 的颜色设置为 红色。

import React, { Component } from 'react';
import { Text, View, StyleSheet, FlatList } from 'react-native';
import { Input } from 'react-native-elements';



export default class App extends Component {

  render() {
    return (
     <View style = {styles.campusInputView}>
      <Input
        containerStyle = {styles.campusInputContainer}
        inputStyle = {styles.campusInput}
        placeholder = 'KAIST'
        editable = {false}
      />
    </View>
    );
  }
}

const styles = StyleSheet.create({
  campusInputView: {
    flex:1,
    justifyContent:"center",
    alignItems:"center"
  },
  campusInputContainer: {
    borderWidth: 1,
    borderColor: 'red',
    alignItems: 'stretch',
  },
  campusInput: {
    flex: 1,
    fontFamily: 'NanumSquareB',
    fontSize: 20,
    paddingVertical: 0,
  },
});

- hong developer