javascript - cli - react native example

Hacer ver el 80% del ancho del padre en React Native

Question

Estoy creando un formulario en React Native y me gustaría hacer que mi TextInput el 80% del ancho de la pantalla.

Con HTML y CSS ordinario, esto sería sencillo:

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

Excepto que React Native no admite la propiedad de display , porcentajes de ancho o márgenes automáticos.

Entonces, ¿qué debo hacer en su lugar? Hay una discusión sobre este problema en el rastreador de problemas de React Native, pero las soluciones propuestas parecen trucos desagradables.

Answer 1

A partir de React Native 0.42 height: y width: acepta porcentajes.

• Ejemplo en vivo
  Ancho / altura del niño como proporción del padre

• Código

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

Answer 2

Así es como obtuve la solución. Simple y dulce Independiente de la densidad de la pantalla:

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

Answer 3

En su StyleSheet, simplemente ponga:

width: ''80%'';

en vez de:

width: 80%;

Keep Coding ........ :)

Answer 4

Eso debería ajustarse a sus necesidades:

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

Answer 5

La técnica que uso para tener un ancho porcentual del elemento primario es agregar una vista de espaciador adicional en combinación con algo de flexbox. Esto no se aplicará a todos los escenarios, pero puede ser muy útil.

Así que, aquí vamos:

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

Básicamente, la propiedad flex es el ancho relativo al flex "total" de todos los artículos en el contenedor flex. Entonces, si todos los artículos suman 100, tienes un porcentaje. En el ejemplo, podría haber usado los valores flexibles 6 y 4 para el mismo resultado, por lo que es aún más FLEXible.

Si desea centrar la vista de ancho porcentual: agregue dos separadores con la mitad del ancho. Entonces en el ejemplo sería 2-6-2.

Por supuesto, agregar las vistas adicionales no es lo mejor del mundo, pero en una aplicación del mundo real puedo imaginar que el espaciador contendrá contenido diferente.

Answer 6

Si simplemente está buscando hacer la entrada relativa al ancho de la pantalla, una forma fácil sería usar Dimensiones:

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

He configurado un proyecto de trabajo here . El código también está abajo.

here

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

Answer 7

También puedes probar la react-native-extended-stylesheet que admite el porcentaje para aplicaciones de orientación única:

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

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