ดูความกว้าง 80% ของพาเรนต์ใน React Native

Question 1

ฉันกำลังสร้างแบบฟอร์มใน React Native และต้องการทำให้TextInput80% ของความกว้างหน้าจอ

ด้วย HTML และ CSS ธรรมดาสิ่งนี้จะตรงไปตรงมา:

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

ยกเว้นว่า React Native ไม่รองรับdisplayคุณสมบัติเปอร์เซ็นต์ความกว้างหรือระยะขอบอัตโนมัติ

แล้วฉันจะทำอย่างไรดี? มีการอภิปรายเกี่ยวกับปัญหานี้ในเครื่องมือติดตามปัญหาของ React Native แต่วิธีแก้ปัญหาที่เสนอดูเหมือนเป็นการแฮ็กที่น่ารังเกียจ

Question 2

เมื่อ React Native 0.42 height:และwidth:ยอมรับเปอร์เซ็นต์

ใช้width: 80%ในสไตล์ชีตของคุณและใช้งานได้จริง

ภาพหน้าจอ
ตัวอย่าง
ความกว้าง / ความสูงของเด็กตามสัดส่วนของผู้ปกครอง

รหัส

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

สิ่งนั้นควรตรงกับความต้องการของคุณ:

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

หากคุณต้องการให้อินพุตสัมพันธ์กับความกว้างของหน้าจอวิธีง่ายๆคือใช้ Dimensions:

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

ฉันได้ตั้งค่าโครงการทำงานที่นี่ โค้ดอยู่ด้านล่างด้วย

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

ใน StyleSheet ของคุณให้ใส่:

width: '80%';

แทน:

width: 80%;

ให้ Coding ........ :)

Question 6

คุณยังสามารถลองใช้สไตล์ชีทแบบตอบสนองเนทีฟ - ขยายที่รองรับเปอร์เซ็นต์สำหรับแอปแนวเดียว

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

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

Question 7

เทคนิคที่ฉันใช้สำหรับการมีเปอร์เซ็นต์ความกว้างของพาเรนต์คือการเพิ่มมุมมองตัวเว้นวรรคพิเศษร่วมกับเฟล็กบ็อกซ์บางตัว สิ่งนี้จะใช้ไม่ได้กับทุกสถานการณ์ แต่จะมีประโยชน์มาก

ไปเลย:

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

โดยทั่วไปคุณสมบัติ flex คือความกว้างที่สัมพันธ์กับ flex "total" ของไอเท็มทั้งหมดใน flex container ดังนั้นหากรายการทั้งหมดรวมกันเป็น 100 คุณมีเปอร์เซ็นต์ ในตัวอย่างฉันสามารถใช้ค่า flex 6 & 4 สำหรับผลลัพธ์เดียวกันได้ดังนั้นจึง FLEXible มากขึ้น

หากคุณต้องการจัดกึ่งกลางมุมมองความกว้างเปอร์เซ็นต์: เพิ่มตัวเว้นวรรคสองตัวโดยมีความกว้างครึ่งหนึ่ง ในตัวอย่างมันจะเป็น 2-6-2

แน่นอนว่าการเพิ่มมุมมองพิเศษไม่ใช่สิ่งที่ดีที่สุดในโลก แต่ในแอปโลกแห่งความเป็นจริงฉันสามารถสร้างภาพตัวเว้นวรรคจะมีเนื้อหาที่แตกต่างกัน

Question 8

ฉันมีโซลูชันที่อัปเดตแล้ว (ปลายปี 2019) เพื่อให้ได้ความกว้าง 80% ของผู้ปกครองตอบสนองด้วย Hooksมันใช้งานได้แม้ว่าอุปกรณ์จะหมุน

คุณสามารถใช้Dimensions.get('window').widthเพื่อรับความกว้างของอุปกรณ์ในตัวอย่างนี้คุณจะเห็นว่าคุณสามารถทำได้อย่างตอบสนอง

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

วิธีที่ง่ายที่สุดในการบรรลุคือการใช้ความกว้างในการดู

width: '80%'

Question 10

นี่คือวิธีที่ฉันมีทางออก เรียบง่ายและน่ารัก ไม่ขึ้นกับความหนาแน่นของหน้าจอ:

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 11

เพียงแค่ใส่เครื่องหมายคำพูดตามขนาดในโค้ดของคุณ การใช้สิ่งนี้คุณสามารถใช้เปอร์เซ็นต์ความกว้างความสูง

input: {
    width: '80%'
}