Stellen Sie die Ansicht in React Native auf 80 % Breite des übergeordneten Elements ein

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

Mit HTML und gewöhnlichem CSS wäre dies einfach:

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

Außer dass React Native die nicht unterstützt display Eigenschaften, prozentuale Breiten oder automatische Ränder.

Was soll ich stattdessen tun? Es gibt einige Diskussion über dieses Problem im Issue Tracker von React Native, aber die vorgeschlagenen Lösungen wirken wie fiese Hacks.

Ab React Native 0.42 height: und width: Prozentzahlen akzeptieren.

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

• Bildschirmfoto
  
  

• Live-Beispiel
  Breite/Höhe des untergeordneten Elements als Anteil des übergeordneten Elements

• 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 zu deinen Anforderungen passen:

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 die Eingabe einfach relativ zur Bildschirmbreite vornehmen möchten, wäre eine einfache Möglichkeit, Dimensions zu 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 eingerichtet hier. 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);

Geben Sie in Ihrem StyleSheet einfach Folgendes ein:

width: '80%';

Anstatt von:

width: 80%;

Weiter codieren…….. 🙂

Sie können es auch versuchen reagieren-native-erweitertes-stylesheet die den Prozentsatz für Apps mit einer Ausrichtung unterstützt:

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

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

Die Technik, die ich verwende, um die prozentuale Breite des übergeordneten Elements zu erhalten, besteht darin, eine zusätzliche Abstandshalteransicht 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 Flex-Eigenschaft die Breite relativ zur “Gesamt”-Flex aller Elemente im Flex-Container. Wenn also alle Elemente zusammen 100 ergeben, haben Sie einen Prozentsatz. Im Beispiel hätte ich die Flex-Werte 6 & 4 für dasselbe Ergebnis verwenden können, also ist es noch flexibler.

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

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

Ich habe eine aktualisierte Lösung (Ende 2019), um eine Elternbreite von 80 % zu erhalten Responsive mit Hooks Es funktioniert auch, wenn sich das Gerät dreht.

Sie können verwenden Dimensions.get('window').width Um die Gerätebreite in diesem Beispiel zu erhalten, können Sie sehen, wie Sie es Responsive tun können

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