Rendi visibile l'80% della larghezza del genitore in React Native

Question 1

Sto creando un modulo in React Native e vorrei rendere il mio TextInput80% della larghezza dello schermo.

Con HTML e CSS ordinari, questo sarebbe semplice:

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

Tranne che React Native non supporta la displayproprietà, le larghezze percentuali o i margini automatici.

Allora cosa dovrei fare invece? Ci sono alcune discussioni su questo problema nel tracker dei problemi di React Native, ma le soluzioni proposte sembrano brutti hack.

Question 2

A partire da React Native 0.42 height:e width:accetta le percentuali.

Usalo width: 80%nei tuoi fogli di stile e funziona.

Immagine dello schermo
Esempio dal vivo
Larghezza / altezza del bambino come proporzione del genitore

Codice

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

Question 3

Questo dovrebbe soddisfare le tue esigenze:

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

Question 4

Se stai semplicemente cercando di rendere l'input relativo alla larghezza dello schermo, un modo semplice sarebbe usare Dimensioni:

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

Ho impostato un progetto di lavoro qui . Il codice è anche sotto.

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

Question 5

Nel tuo foglio di stile, inserisci semplicemente:

width: '80%';

invece di:

width: 80%;

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

Question 6

Puoi anche provare il foglio di stile reattivo nativo esteso che supporta la percentuale per le app a orientamento singolo:

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

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

Question 7

La tecnica che uso per avere la larghezza percentuale del genitore è l'aggiunta di una vista spaziatore extra in combinazione con alcuni flexbox. Questo non si applicherà a tutti gli scenari ma può essere molto utile.

Quindi eccoci qui:

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

Fondamentalmente la proprietà flex è la larghezza relativa al flex "totale" di tutti gli elementi nel contenitore flex. Quindi, se tutti gli elementi sommano a 100, hai una percentuale. Nell'esempio avrei potuto utilizzare i valori di flessibilità 6 e 4 per lo stesso risultato, quindi è ancora più FLESSIBILE.

Se vuoi centrare la vista della larghezza percentuale: aggiungi due spaziatori con metà della larghezza. Quindi nell'esempio sarebbe 2-6-2.

Ovviamente aggiungere le visualizzazioni extra non è la cosa più bella del mondo, ma in un'app del mondo reale posso immaginare che lo spaziatore conterrà contenuti diversi.

Question 8

Ho una soluzione aggiornata (fine 2019), per ottenere l'80% di larghezza del genitore Responsively con Hooks funziona anche se il dispositivo ruota.

Puoi utilizzare Dimensions.get('window').widthper ottenere la larghezza del dispositivo in questo esempio puoi vedere come puoi farlo in modo reattivo

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

Question 9

Questo è il modo in cui ho ottenuto la soluzione. Semplice e dolce. Indipendente dalla densità dello schermo:

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

Question 10

Il modo più semplice per ottenerlo è applicare la larghezza alla vista.

width: '80%'