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

97

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.

Mark Amery
quelle
1
react-nativewird flexfür die Größen und Positionen der Elemente verwendet . Ich bin nicht sicher, aber vielleicht flex-basisist es das, was Sie brauchen: Überprüfen Sie dies und das
alix
1
Und nach dieser Ausgabe etwas wie flex: 0.8kann die Arbeit machen.
Alix

Antworten:

79

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>
    );
GollyJer
quelle
88

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>
        );
    }
});
neciu
quelle
17
nur <View style = {{width: '75% ', borderWidth: 1}}> </ View>
user3044484
41

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);
Nader Dabit
quelle
6
Die React Native-Dokumente sollten das Dimensions-Paket auf der Titelseite erwähnen - das überrascht mich nicht ...
AA Karim
sehr wertvolle Antwort. Abmessungen sind eigentlich sehr nützlich. Hinweis: "Obwohl Bemaßungen sofort verfügbar sind, können sie sich ändern (z. B. aufgrund der Gerätedrehung). Daher sollte jede Renderlogik oder jeder Renderstil, der von diesen Konstanten abhängt, versuchen, diese Funktion bei jedem Rendering aufzurufen, anstatt den Wert zwischenzuspeichern (z. B. using) Inline-Stile, anstatt einen Wert in einem StyleSheet festzulegen). "
Phil
Beachten Sie, dass die Verwendung von Bemaßungen Ihre Layouts nach der Bildschirmdrehung unterbricht, wenn Sie Querformat unterstützen und diese Layoutänderungen nicht manuell behandeln.
Ratsimihah
22

Fügen Sie in Ihr StyleSheet einfach Folgendes ein:

width: '80%';

anstatt:

width: 80%;

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

Krishna Raj Salim
quelle
13

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%'
  }
});
Vitalets
quelle
5

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.

dsdeur
quelle
Sie können sich vorstellen, dass der Abstandshalter unterschiedliche Inhalte enthält? Warum? Ich kann mir viele Beispiele vorstellen, bei denen ein Abstandshalter nur Füll-HTML ist.
AlxVallejo
1

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',
     },
});
Shayan Moghadam
quelle
0

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>
    );
  }
}
sagar suri
quelle
0

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

width: '80%'
Kushal Desai
quelle