不允许视图根据内容增加其大小

时间:2016-04-24 19:28:08

标签: react-native

我很反应原生。我刚刚创建了一个可重用的文本输入组件。 我将该可重用组件用于视图中。在一个地方我添加可重复使用的组件4次,在另一个地方添加7次。

示例:

<Textinput
        style={styles.textInput}
        secureTextEntry={false}
        textInputName={'USERNAME'}
        showBottomBorder={true}
        height={45}
        onTextChange={this.onTextChangeUsername}
        />

在视图中使用上面的代码7次,会导致视图大小增加。 但我不想在iPhone 4s屏幕上看起来很难看。

有没有办法不允许这样做?或者我可以根据其父视图的高度给予可重用组件高度?

喜欢,height = {parentView.height / 7}?

1 个答案:

答案 0 :(得分:0)

我不确定如何解决您的问题,但如果您想添加一个取决于div大小的自定义宽度/高度组件,您可以使用类函数执行类似的操作:< / p>

resizeGraphs(){

        var div = document.getElementsByClassName("yourcontainer")
        if (div[0] != undefined){
            var divWidth = document.getElementsByClassName("yourcontainer")[0].clientWidth //or .clientHeight
            this.setState({
                divWidth,
            })}}

要解释一下,这将在componentDidMount中调用(我想你不必担心窗口大小调整)。它获取给定类的宽度,您可以按照建议适当地缩放内部元素。

如果您看到反应中直接引用DOM,我想警告标志应该会消失,但我不确定如何解决这个问题。如果有人有更多&#34; react-y&#34;解决方案我很乐意看到它..