Pertanyaan Buat tampilan lebar 80% dari orang tua di Bereaksi Bawaan


Saya membuat formulir di Bereaksi Asli dan ingin membuat saya TextInputs 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 display properti, lebar persentase, atau margin otomatis.

Jadi apa yang harus saya lakukan? Ada beberapa diskusi tentang masalah ini dalam React Native's issue tracker, tetapi solusi yang diajukan tampak seperti peretasan yang buruk.


49
2017-11-26 13:29


asal


Jawaban:


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

54
2017-11-27 08:05



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

react native percentage height/width example

  • Contoh Langsung
    Anak Lebar / Tinggi sebagai Proporsi Orang Tua 

  • Kode

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

36
2017-07-25 14:52



Jika Anda hanya ingin membuat input relatif terhadap lebar layar, cara mudahnya 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 sudah menyiapkan proyek kerja 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);

25
2017-11-26 15:20



Anda juga bisa 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%'
  }
});

12
2018-02-08 19:49



Teknik yang saya gunakan untuk memiliki persentase lebar dari orang tua adalah menambahkan tampilan spacer tambahan yang dikombinasikan dengan beberapa flexbox. Ini tidak akan berlaku untuk semua skenario tetapi itu bisa sangat membantu.

Jadi di sini kita pergi:

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 saya bisa menggunakan nilai flex 6 & 4 untuk hasil yang sama, jadi itu lebih FLEXible.

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

Tentu saja menambahkan pandangan ekstra bukan hal yang paling baik di dunia, tetapi dalam aplikasi dunia nyata saya dapat membayangkan spacer akan berisi konten yang berbeda.


4
2017-12-15 01:33



Inilah cara saya mendapatkan solusinya. Sederhana dan Manis. Independen dari kerapatan 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>
    );
  }
}

0
2018-04-21 10:40



Di StyleSheet Anda, cukup letakkan:

width: '80%';

dari pada:

width: 80%;

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


0
2017-07-29 16:19