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

Im new to react-native. I have just created a reusable component of text input as I want. Im using that reusable component into a view. At one place Im adding reusable component 4 times, and at another place 7 times.

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

example :

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

using above code 7 times in view , causes increase of size of the view. But I dont want to allow this at it looks ugly on iPhone 4s screen.

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

So is there any way to disallow that ? Or rather can I give height to reusable component depending upon its parent view's height ?

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

Like , height={parentView.height/7} ?

比如,height = {parentView.height / 7}?

1 个解决方案

#1

I'm not sure exactly how to solve your problem, but if you wanted to add a custom width/height component that depended on the size of the div, you could do something like this with a class function:

我不确定如何解决你的问题,但如果你想添加一个取决于div大小的自定义宽度/高度组件,你可以用类函数做这样的事情:

resizeGraphs(){

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

To explain, this will be called in componentDidMount (I guess you don't have to worry about window resizing). It gets the width of a given class and you can scale your inner elements appropriately as you suggested.

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

I guess warning flags should be going off if you see direct references to the DOM in react, but I wasn't sure how else to solve this. If anyone has a more "react-y" solution i'd love to see it..

如果你看到反应中直接引用DOM,我想警告标志应该会消失,但我不知道如何解决这个问题。如果有人有更“反应”的解决方案,我很乐意看到它。

#1