Machen Sie in React Native die Ansicht des Elternteils um 80% breit

Das sollte Ihren Bedürfnissen entsprechen:

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

Ab React Native 0.42 akzeptieren height: und width: Prozentsätze. 

• Live-Beispiel
  Breite/Höhe des Kindes als Elternteil 

• Code 

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

Wenn Sie nur die Eingabe relativ zur Bildschirmbreite vornehmen möchten, können Sie einfach Dimensionen verwenden:

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

Ich habe ein Arbeitsprojekt hier eingerichtet. Code ist auch unten. 

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

Sie können auch versuchen, React-native-extended-stylesheet , das den Prozentsatz für Apps mit einer Orientierung unterstützt:

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

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

Fügen Sie in Ihrem StyleSheet einfach Folgendes ein: 

width: '80%';

anstatt: 

width: 80%;

Codierung beibehalten ........ :)

Die Technik, die ich für die prozentuale Breite des übergeordneten Elements verwende, besteht darin, eine zusätzliche Spacer-Ansicht in Kombination mit einer Flexbox hinzuzufügen. Dies gilt nicht für alle Szenarien, kann aber sehr hilfreich sein.

Auf geht's:

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

Grundsätzlich ist die Biegeeigenschaft die Breite relativ zu der "Gesamt" Biegung aller Artikel im Biegungsbehälter. Wenn also alle Artikel 100 ergeben, haben Sie einen Prozentsatz. In dem Beispiel hätte ich die Flex-Werte 6 und 4 für dasselbe Ergebnis verwenden können, sodass es noch flexibler ist.

Wenn Sie die Ansicht für die prozentuale Breite zentrieren möchten: Fügen Sie zwei Abstandhalter mit der halben Breite hinzu. Im Beispiel wäre es also 2-6-2. 

Das Hinzufügen der zusätzlichen Ansichten ist natürlich nicht das Schönste auf der Welt, aber in einer realen App kann ich mir vorstellen, dass der Abstandhalter unterschiedliche Inhalte enthält.

So habe ich die Lösung gefunden. Einfach und süß. Unabhängig von der Bildschirmdichte:

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