使视图在 React Native 中为父项的 80% 宽度

javascript css reactjs react-native

2022-08-30 04:34:25

我正在 React Native 中创建一个表单，并希望使我的屏幕宽度达到 80%。TextInput

对于HTML和普通的CSS，这将很简单：

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

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

那么我该怎么办呢？React Native 的问题跟踪器中有一些关于这个问题的讨论，但提出的解决方案看起来像是令人讨厌的黑客攻击。

答案 1

截至 React Native 0.42 并接受百分比。height:width:

在你的样式表中使用，它就工作了。width: 80%

截图
示例子项宽度/高度作为父项的比例

法典

import React from 'react';
import { Text, View, StyleSheet } from 'react-native';

const width_proportion = '80%';
const height_proportion = '40%';

const styles = StyleSheet.create({
  screen: {
    flex: 1,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#5A9BD4',
  },
  box: {
    width: width_proportion,
    height: height_proportion,
    alignItems: 'center',
    justifyContent: 'center',
    backgroundColor: '#B8D2EC',
  },
  text: {
    fontSize: 18,
  },
});

export default () => (
  <View style={styles.screen}>
    <View style={styles.box}>
      <Text style={styles.text}>
        {width_proportion} of width{'\n'}
        {height_proportion} of height
      </Text>
    </View>
  </View>
);

答案 2

这应该符合您的需求：

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>
        );
    }
});