在React Native中查看父级的80%宽度

Question

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

使用HTML和普通的CSS,这很简单:

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

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

那我该怎么做呢？在React Native的问题跟踪器中有一些关于这个问题的讨论,但是提议的解决方案看起来像讨厌的黑客.

Answer 1

这应该符合您的需求:

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

Answer 2

从React Native 0.42开始height:,width:接受百分比.

• 实例
  子宽度/高度作为父对象的比例

• 码

  import React, { Component } from 'react';
  import { Text, View, StyleSheet } from 'react-native';
  
  const width = '80%';
  const height = '40%';
  
  export default class App extends Component {
    render() {
      return (
        <View style={styles.screen}>
          <View style={styles.box}>
            <Text style={styles.text}>
              {width} of width{'\n'}
              {height} of height
            </Text>
          </View>
        </View>
      );
    }
  }
  
  const styles = StyleSheet.create({
    screen: {
      flex: 1,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#7AC36A',
    },
    box: {
      width,
      height,
      alignItems: 'center',
      justifyContent: 'center',
      backgroundColor: '#F3D1B0',
    },
    text: {
      fontSize: 18,
    },
  });
  

Answer 3

如果您只是想要相对于屏幕宽度进行输入,一种简单的方法是使用Dimensions:

// De structure Dimensions from React
var React = require('react-native');
var {
  ...
  Dimensions
} = React; 

// Store width in variable
var width = Dimensions.get('window').width; 

// Use width variable in style declaration
<TextInput style={{ width: width * .8 }} />

我在这里建立了一个工作项目.代码也在下面.

https://rnplay.org/apps/rqQPCQ

'use strict';

var React = require('react-native');
var {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  TextInput,
  Dimensions
} = React;

var width = Dimensions.get('window').width;

var SampleApp = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text style={{fontSize:22}}>Percentage Width In React Native</Text>
        <View style={{marginTop:100, flexDirection: 'row',justifyContent: 'center'}}>
            <TextInput style={{backgroundColor: '#dddddd', height: 60, width: width*.8 }} />
          </View>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    marginTop:100
  },

});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

Answer 4

在你的StyleSheet中,简单地说:

width: '80%';

代替:

width: 80%;

保持编码........ :)

Answer 5

您还可以尝试使用支持单向应用百分比的react-native-extended-stylesheet:

import EStyleSheet from 'react-native-extended-stylesheet';

const styles = EStyleSheet.create({
  column: {
    width: '80%',
    height: '50%',
    marginLeft: '10%'
  }
});

Answer 6

我使用的具有父级百分比宽度的技术是结合一些flexbox添加一个额外的间隔视图。这并非适用于所有情况，但可能会很有帮助。

所以我们开始：

class PercentageWidth extends Component {
    render() {
        return (
            <View style={styles.container}>
                <View style={styles.percentageWidthView}>
                    {/* Some content */}
                </View>

                <View style={styles.spacer}
                </View>
            </View>
        );
    }
}

const styles = StyleSheet.create({
    container: {
        flexDirection: 'row'
    },

    percentageWidthView: {
        flex: 60
    },

    spacer: {
        flex: 40
    }
});

基本上，flex属性是相对于flex容器中所有项目的“全部” flex的宽度。因此，如果所有项目的总和为100，则您有一个百分比。在该示例中，我可以为相同的结果使用flex值6和4，因此它甚至更灵活。

如果要使百分比宽度视图居中，请执行以下操作：添加两个宽度为一半的垫片。因此，在示例中为2-6-2。

当然，添加额外的视图并不是世界上最美好的事情，但是在现实世界中的应用程序中，我可以成像的间隔符将包含不同的内容。