为啥视图和文本输入之间存在差距？

Posted 2023-05-07

【中文标题】为啥视图和文本输入之间存在差距？

【英文标题】：why is there a gap between view and text input?为什么视图和文本输入之间存在差距？

【发布时间】：2021-11-26 11:24:06

【问题描述】：

我的包装视图和文本输入之间出现了一些差距，我检查了填充和边距，但没有任何效果：

      <View style=styles.wrapper>
        <View style= width: '100%',height:'10%', backgroundColor: 'yellow' ></View>

        <TextInput style=styles.edit_input
          numberOfLines=15
          multiline=true
        />
      </View>

造型：

  wrapper: 
        width: '90%',
        marginTop: '10%',
        backgroundColor: 'gray',
        borderTopWidth: 1,
    ,
    edit_input:  
        backgroundColor:'white',
        color: 'black', 
        borderWidth: 1, 
        textAlignVertical: 'top',
        width: '90%',
        alignSelf: 'center',
    ,

但是当您将 height:'10%' 替换为 height:50 时，这种情况就会消失

知道是什么原因造成的吗？或者如何使用相对单位解决这个问题？

【问题讨论】：

高度不受影响

@Ifaruki 是什么意思？

【参考方案1】：

我不建议使用您的方法，因为它在不同设备上的行为往往不同。例如，您的方法在网络上看起来与您期望的一样，但在移动设备上显示出差距。

改为使用 flexbox 方法。问题是你真正想要在这里实现什么。您没有在包装器或 Textinput 上设置高度。黄色条的高度是 10% 到底是多少呢？这有点模棱两可，容易出现意想不到的设计问题。如果您希望黄色框占 TextInput 的 10%，您可以使用 flex 框执行类似的操作。

export default function App() 
  return (
      <View style=styles.wrapper>
        <View style= width: '100%', flex:1, backgroundColor: 'yellow' ></View>

        <TextInput style=styles.edit_input
          numberOfLines=15
          multiline=true
        />
      </View>
  );


const styles = StyleSheet.create(
  wrapper: 
        width: '90%',
        marginTop: '10%',
        backgroundColor: 'gray',
        borderTopWidth: 1,
        flex: 1
    ,
    edit_input:  
        backgroundColor:'white',
        color: 'black', 
        borderWidth: 1, 
        textAlignVertical: 'top',
        width: '90%',
        alignSelf: 'center',
        flex: 9
    ,
);

请注意，这种方法将填满所有可用空间，而您的则没有。但是你唯一具有高度的元素是带有 numberOfLines 的 TextInput，它的大小取决于用户的字体缩放等。所以你不应该依赖它。