在React Native中查看父级的80％宽度 [英] Make view 80% width of parent in React Native

问题描述

我正在使用React Native创建一个表单，并希望将我的 TextInput 设为屏幕宽度的80％。

I'm creating a form in React Native and would like to make my TextInputs 80% of the screen width.

使用HTML和普通的CSS，这很简单：

With HTML and ordinary CSS, this would be straightforward:

input {
    display: block;
    width: 80%;
    margin: auto;
}

除了React Native不支持显示属性，百分比宽度或自动边距。

Except that React Native doesn't support the display property, percentage widths, or auto margins.

那么我该怎么做呢？在React Native的问题跟踪器中有对此问题的一些讨论，但是建议的解决方案看起来像讨厌的黑客。

So what should I do instead? There's some discussion of this problem in React Native's issue tracker, but the proposed solutions seem like nasty hacks.

推荐答案

这应该符合您的需求：

var yourComponent = React.createClass({
    render: function () {
        return (
            <View style={{flex:1, flexDirection:'column', justifyContent:'center'}}>
                <View style={{flexDirection:'row'}}>
                    <TextInput style={{flex:0.8, borderWidth:1, height:20}}></TextInput>
                    <View style={{flex:0.2}}></View> // spacer
                </View>
            </View>
        );
    }
});

这篇关于在React Native中查看父级的80％宽度的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！