Machen Sie die Ansicht 80% Breite des übergeordneten Elements in React Native

Ich erstelle ein Formular in React Native und möchte, dass mein TextInputs 80% der Bildschirmbreite ausmacht.

Mit HTML und normalem CSS wäre dies unkompliziert:

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

Außer dass React Native die displayEigenschaft, die prozentualen Breiten oder die automatischen Ränder nicht unterstützt .

Was soll ich stattdessen tun? Es gibt einige Diskussionen über dieses Problem im Issue-Tracker von React Native, aber die vorgeschlagenen Lösungen scheinen böse Hacks zu sein.

Ab React Native 0,42 height:und width:Prozentsätze akzeptieren.

Verwenden Sie width: 80%in Ihren Stylesheets und es funktioniert einfach.

• Bildschirmfoto
  
  

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

• Code

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

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

Wenn Sie lediglich die Eingabe relativ zur Bildschirmbreite vornehmen möchten, können Sie auf einfache Weise Abmessungen 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 hier ein Arbeitsprojekt 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);

Fügen Sie in Ihr StyleSheet einfach Folgendes ein:

width: '80%';

anstatt:

width: 80%;

Codierung weiter ........ :)

Sie können auch React-Native-Extended-Stylesheet ausprobieren , das den Prozentsatz für Apps mit einfacher Ausrichtung unterstützt:

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

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

Die Technik, mit der ich die prozentuale Breite des übergeordneten Elements habe, besteht darin, eine zusätzliche Abstandshalteransicht in Kombination mit einer Flexbox hinzuzufügen. Dies gilt nicht für alle Szenarien, kann jedoch 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 Flex-Eigenschaft die Breite relativ zum "Gesamt" -Flex aller Elemente im Flex-Container. Wenn also alle Elemente 100 ergeben, haben Sie einen Prozentsatz. Im Beispiel hätte ich die Flex-Werte 6 und 4 für das gleiche Ergebnis verwenden können, damit es noch flexibler ist.

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

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

Ich habe eine aktualisierte Lösung (Ende 2019), um 80% Breite des übergeordneten Responsive mit Hooks zu erhalten , funktioniert es auch, wenn sich das Gerät dreht.

Sie können mit Dimensions.get('window').widthGerätebreite erhalten in diesem Beispiel sehen Sie , wie Sie es tun können Als Reaktion

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

So habe ich die Lösung bekommen. 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>
    );
  }
}

Der einfachste Weg, dies zu erreichen, ist das Anwenden der Breite auf die Ansicht.

width: '80%'