Question

我正在使用React Native创建一个表单，并希望使#if !TESTING let settings: UIUserNotificationSettings = UIUserNotificationSettings(forTypes: [.Alert, .Badge, .Sound], categories: nil) application.registerUserNotificationSettings(settings) #endif的屏幕宽度达到80％。

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

TextInput

除了React Native不支持input { display: block; width: 80%; margin: auto; }属性，百分比宽度或自动边距。

那我该怎么做呢？在React Native的问题跟踪器中有some discussion of this problem，但提议的解决方案看起来像讨厌的黑客。

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:接受百分比。

实例< Child Width/Height as Proportion of Parent

代码

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

如果您只是想要相对于屏幕宽度进行输入，一种简单的方法是使用尺寸：

// 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 }} />

我已经设置了一个工作项目here。代码也在下面。

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

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

O(g(n))

Answer 5

在您的StyleSheet中，只需输入：

width: '80%';

而不是：

width: 80%;

继续编码........：）

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属性是相对于＆＃34; total＆＃34;的宽度。 flex容器中的所有项目。因此，如果所有项目总和为100，则您有百分比。在示例中，我可以使用flex值6＆amp; 4为了相同的结果，所以它更加灵活。

如果要将百分比宽度视图居中：添加两个宽度为一半的垫片。所以在这个例子中它将是2-6-2。

当然，添加额外的视图并不是世界上最好的东西，但在真实世界的应用程序中，我可以想象间隔符将包含不同的内容。

Answer 7

这是我获得解决方案的方式。简单而甜蜜。独立于屏幕密度：

export default class AwesomeProject extends Component {
    constructor(props){
        super(props);
        this.state = {text: ""}
    }
  render() {
    return (
       <View
          style={{
            flex: 1,
            backgroundColor: "#ececec",
            flexDirection: "column",
            justifyContent: "center",
            alignItems: "center"
          }}
        >
          <View style={{ padding: 10, flexDirection: "row" }}>
            <TextInput
              style={{ flex: 0.8, height: 40, borderWidth: 1 }}
              onChangeText={text => this.setState({ text })}
              placeholder="Text 1"
              value={this.state.text}
            />
          </View>
          <View style={{ padding: 10, flexDirection: "row" }}>
            <TextInput
              style={{ flex: 0.8, height: 40, borderWidth: 1 }}
              onChangeText={text => this.setState({ text })}
              placeholder="Text 2"
              value={this.state.text}
            />
          </View>
          <View style={{ padding: 10, flexDirection: "row" }}>
            <Button
              onPress={onButtonPress}
              title="Press Me"
              accessibilityLabel="See an Information"
            />
          </View>
        </View>
    );
  }
}

Answer 8

我有一个更新的解决方案（于2019年末），以获取80％的父级宽度使用Hooks作为响应，即使设备旋转，它也可以正常工作。

在此示例中，您可以使用Dimensions.get('window').width来获取“设备宽度”，您将看到如何快速响应

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

export default const AwesomeProject() => {
   const [screenData, setScreenData] = useState(Dimensions.get('window').width);

    useEffect(() => {
     const onChange = () => {
     setScreenData(Dimensions.get('window').width);
     };
     Dimensions.addEventListener('change', onChange);

     return () => {Dimensions.removeEventListener('change', onChange);};
    });

   return (  
          <View style={[styles.container, { width: screenData * 0.8 }]}>
             <Text> I'mAwesome </Text>
           </View>
    );
}

const styles = StyleSheet.create({
container: {
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
     backgroundColor: '#eee',
     },
});

Answer 9

最简单的方法是将宽度应用于视图。

width: '80%'

Answer 10

只需在代码中加上大小左右的引号即可。使用此功能，您可以使用宽度，高度百分比

input: {
    width: '80%'
}

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

10 个答案: