it-swarm.com.de

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

Ich erstelle ein Formular in React Native und möchte, dass meine TextInputs 80% der Bildschirmbreite beträgt.

Mit HTML und normalem CSS wäre das unkompliziert:

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

Nur dass React Native die display-Eigenschaft, die prozentuale Breite 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 wirken wie böse Hacks.

56
Mark Amery

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

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

 react native percentage height/width example

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

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);
32
Nader Dabit

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%'
  }
});
12
vitalets

Fügen Sie in Ihrem StyleSheet einfach Folgendes ein: 

width: '80%';

anstatt: 

width: 80%;

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

5

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.

4
dsdeur

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