React Native'de ebeveynin% 80 genişliğinde görünümü yapın

React Native'de bir form oluşturuyorum ve s'mi TextInputekran genişliğinin% 80'ini yapmak istiyorum .

HTML ve sıradan CSS ile bu basit olacaktır:

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

React Native'in displayözelliği, yüzde genişliklerini veya otomatik kenar boşluklarını desteklememesi dışında.

Peki bunun yerine ne yapmalıyım? Orada bu sorunun bazı tartışmalar Anadili en sorun izleyicide Tepki de, ancak önerilen çözümler pis kesmek gibi görünüyor.

React Native 0.42'den itibaren height:ve width:yüzdeleri kabul edin.

width: 80%Stil sayfalarınızda kullanın ve işe yarıyor.

• Ekran görüntüsü
  
  

• Ebeveynin Oranı Olarak Canlı Örnek
  Alt Genişlik / Yükseklik
  
  

• Kod

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

İhtiyaçlarınıza uygun olmalıdır:

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

Girdiyi ekran genişliğine göre yapmak istiyorsanız, kolay bir yol Boyutları kullanmak olacaktır:

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

Burada bir çalışma projesi kurdum . Kod da aşağıdadır.

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

Stil Sayfanıza basitçe şunu yazın:

width: '80%';

onun yerine:

width: 80%;

Kodlamaya Devam Et ........ :)

Tek yönlü uygulamalar için yüzdeyi destekleyen react-native-genişletilmiş stil sayfasını da deneyebilirsiniz :

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

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

Ebeveynin yüzde genişliğine sahip olmak için kullandığım teknik, bazı flexbox'larla birlikte fazladan bir boşluk görünümü eklemektir. Bu, tüm senaryolar için geçerli olmayacaktır, ancak çok yardımcı olabilir.

İşte başlıyoruz:

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

Temel olarak flex özelliği, flex container'daki tüm öğelerin "toplam" flexine göre genişliğidir. Yani tüm öğelerin toplamı 100 ise, bir yüzdeye sahip olursunuz. Örnekte 6 ve 4 esnek değerlerini aynı sonuç için kullanabilirdim, bu yüzden daha da ESNEK.

Yüzde genişlik görünümünü ortalamak istiyorsanız: yarı genişliğe sahip iki boşluk ekleyin. Yani örnekte 2-6-2 olacaktır.

Elbette ekstra görünümler eklemek dünyadaki en güzel şey değil, ancak gerçek bir uygulamada görüntüleyebiliyorum, boşluk bırakıcı farklı içerikler içerecektir.

Cihaz dönse bile çalışır durumda olan Hooks ile Responsively ile ebeveynin% 80 genişliğini elde etmek için güncellenmiş bir çözümüm var (2019'un sonları) .

Dimensions.get('window').widthBu örnekte Cihaz Genişliğini almak için kullanabilirsiniz , bunu nasıl Duyarlı bir şekilde yapabileceğinizi görebilirsiniz.

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

Çözümü bu şekilde aldım. Basit ve Tatlı. Ekran yoğunluğundan bağımsız:

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

Bunu elde etmenin en kolay yolu, görünüme genişlik uygulamaktır.

width: '80%'

Kodunuzdaki boyutun etrafında tırnak işaretleri eklemeniz yeterlidir. Bunu kullanarak genişlik, yükseklik yüzdesini kullanabilirsiniz

input: {
    width: '80%'
}