web-dev-qa-db-fra.com

Rendre la vue 80% largeur du parent dans React Native

Je crée un formulaire dans React Native et souhaite que mon TextInputs atteigne 80% de la largeur de l'écran.

Avec HTML et CSS ordinaire, ce serait simple:

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

Sauf que React Native ne prend pas en charge la propriété display, les largeurs en pourcentage ou les marges automatiques.

Alors, que dois-je faire à la place? Il existe un peu de discussion sur ce problème dans le suivi des problèmes de React Native, mais les solutions proposées semblent être de vilains stratagèmes.

javascriptcssreactjsreact-native
56
Mark Amery

Cela devrait correspondre à vos besoins:

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

À compter de React Native 0.42, height: et width: acceptent les pourcentages. 

 react native percentage height/width example

  • Exemple en direct
    Largeur/Hauteur de l'enfant en tant que proportion du parent 

  • 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

Si vous cherchez simplement à faire l’entrée par rapport à la largeur de l’écran, une solution simple consiste à utiliser Dimensions:

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

J'ai mis en place un projet de travail ici . Le code est également ci-dessous. 

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

Vous pouvez également essayer react-native-extended-stylesheet qui prend en charge le pourcentage pour les applications à orientation unique:

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

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

Dans votre feuille de style, mettez simplement: 

width: '80%';

au lieu de: 

width: 80%;

Gardez le codage ........ :)

5
Krishna Raj Salim

La technique que j'utilise pour obtenir le pourcentage de largeur du parent consiste à ajouter une vue d'espacement supplémentaire en combinaison avec une certaine boîte flexible. Cela ne s'appliquera pas à tous les scénarios, mais cela peut être très utile.

Alors on y va:

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

Fondamentalement, la propriété flex est la largeur par rapport au flex "total" de tous les éléments du conteneur flex. Donc, si tous les éléments totalisent 100, vous avez un pourcentage. Dans l'exemple, j'aurais pu utiliser les valeurs de flexion 6 et 4 pour le même résultat, donc encore plus FLEXible.

Si vous souhaitez centrer la vue de largeur en pourcentage: ajoutez deux entretoises avec la moitié de la largeur. Donc, dans l'exemple, ce serait 2-6-2. 

Bien sûr, ajouter des vues supplémentaires n’est pas la chose la plus agréable au monde, mais dans une application réelle, je peux imaginer que l’espaceur contiendra un contenu différent.

4
dsdeur

C'est comme ça que j'ai eu la solution. Simple et doux. Indépendant de la densité de l'écran:

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