为什么视图和文本输入之间存在差距？答案

【问题标题】：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 是什么意思？

标签： javascript android react-native

【解决方案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，它的大小取决于用户的字体缩放等。所以你不应该依赖它。

【讨论】：