反应原生元素输入全宽答案

【问题标题】：React native Elements Input full width反应原生元素输入全宽
【发布时间】：2019-12-20 01:57:38
【问题描述】：

我试图实现来自 React Native Elements 的输入，它是蓝色的。我想让输入在红色视图中具有全宽。所以我做到了

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,
  },

【问题讨论】：

标签： javascript css react-native

【解决方案1】：

将paddingHorizontal 的containerStyle 覆盖为0 使输入全宽。仅将 padding 覆盖为 0 是不够的。

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

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

【讨论】：

哇。这必须被接受的答案...我不知道为什么当我覆盖 padding 时它不起作用但是当我尝试 paddingHorizontal 时它完美地工作！！

【解决方案2】：

您应该将paddingHorizontal: 0 添加到campusInputContainer

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

【讨论】：

【解决方案3】：

您想要的width 是100%。我将border 的颜色设置为red。

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,
  },
});

【讨论】：