Buat tampilan lebar 80% dari induk di React Native

Question 1

Saya membuat formulir di React Native dan ingin menjadikan TextInputs saya 80% dari lebar layar.

Dengan HTML dan CSS biasa, ini akan menjadi mudah:

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

Kecuali bahwa React Native tidak mendukung displayproperti, persentase lebar, atau margin otomatis.

Jadi apa yang harus saya lakukan? Ada beberapa diskusi tentang masalah ini di pelacak masalah React Native, tetapi solusi yang diusulkan tampak seperti peretasan yang buruk.

Question 2

Mulai React Native 0.42 height:dan width:terima persentase.

Gunakan width: 80%di stylesheet Anda dan itu akan berfungsi.

Screenshot
Teladan Langsung
Lebar / Tinggi Anak sebagai Proporsi Induk

Kode

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

Itu harus sesuai dengan kebutuhan Anda:

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

Jika Anda hanya ingin membuat masukan sesuai dengan lebar layar, cara mudah adalah menggunakan Dimensi:

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

Saya telah menyiapkan proyek kerja di sini . Kode juga di bawah.

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

Di StyleSheet Anda, sederhananya:

width: '80%';

dari pada:

width: 80%;

Terus Coding ........ :)

Question 6

Anda juga dapat mencoba react-native-extended-stylesheet yang mendukung persentase untuk aplikasi orientasi tunggal:

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

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

Question 7

Teknik yang saya gunakan untuk memiliki lebar persentase induk menambahkan tampilan spacer ekstra dalam kombinasi dengan beberapa flexbox. Ini tidak akan berlaku untuk semua skenario tapi bisa sangat membantu.

Jadi ini dia:

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

Pada dasarnya properti flex adalah lebar relatif terhadap flex "total" dari semua item dalam wadah flex. Jadi jika semua item berjumlah 100 Anda memiliki persentase. Dalam contoh ini saya bisa menggunakan nilai flex 6 & 4 untuk hasil yang sama, jadi lebih FLEXible.

Jika Anda ingin memusatkan tampilan lebar persentase: tambahkan dua spacer dengan setengah lebar. Jadi dalam contoh ini akan menjadi 2-6-2.

Tentu saja menambahkan tampilan ekstra bukanlah hal yang terbaik di dunia, tetapi di aplikasi dunia nyata saya dapat membayangkan spacer akan berisi konten yang berbeda.

Question 8

Saya memiliki solusi yang diperbarui (akhir 2019), untuk mendapatkan lebar 80% dari induk secara Responsif dengan Hooks, itu berfungsi bahkan jika perangkat berputar.

Anda dapat menggunakan Dimensions.get('window').widthuntuk mendapatkan Lebar Perangkat dalam contoh ini Anda dapat melihat bagaimana Anda dapat melakukannya secara Responsif

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

Inilah cara saya mendapatkan solusinya. Sederhana dan Manis. Independen kepadatan Layar:

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

Cara termudah untuk melakukannya adalah dengan menerapkan lebar ke tampilan.

width: '80%'