रिएक्ट नेटिव में माता-पिता की 80% चौड़ाई को देखें

Question

मैं रिएक्ट नेटिव में एक फॉर्म बना रहा हूं और TextInputस्क्रीन की चौड़ाई का 80% हिस्सा बनाना चाहूंगा ।

HTML और साधारण सीएसएस के साथ, यह सीधा होगा:

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

सिवाय इसके कि रिएक्ट नेटिव displayसंपत्ति, प्रतिशत चौड़ाई, या ऑटो मार्जिन का समर्थन नहीं करता है ।

तो इसके बजाय मुझे क्या करना चाहिए? रिएक्ट नेटिव के इश्यू ट्रैकर में इस समस्या की कुछ चर्चा है , लेकिन प्रस्तावित समाधान नॉटी हैक्स की तरह प्रतीत होते हैं।

Comments

react-nativeflexतत्वों के आकार और स्थिति के लिए उपयोग करता है । मुझे यकीन नहीं है लेकिन हो सकता flex-basisहै कि आपको क्या चाहिए: यह जांचें और यह

— एलिक्स

और इस मुद्दे के अनुसार कुछ flex: 0.8काम कर सकते हैं।

— एलिक्स

Answer 1

रिएक्टिव नेटिव 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>
  );

Answer 2

यह आपकी आवश्यकताओं के अनुरूप होना चाहिए:

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

Comments

बस <दृश्य शैली = {{चौड़ाई: '75% ', सीमा: 1}}> </ दृश्य>

— user3044484

Answer 3

यदि आप इनपुट को स्क्रीन की चौड़ाई के सापेक्ष बनाना चाहते हैं, तो आयामों का उपयोग करने का एक आसान तरीका होगा:

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

Comments

रिएक्टिव नेटिव डॉक्स में फ्रंट पेज पर डायमेंशन पैकेज का उल्लेख होना चाहिए - कि यह मुझे अचरज नहीं करता ...

— AA करीम

बहुत मूल्यवान उत्तर। आयाम वास्तव में बहुत उपयोगी है। नोट: "हालांकि आयाम तुरंत उपलब्ध हैं, वे बदल सकते हैं (उदाहरण के लिए डिवाइस रोटेशन के कारण) इसलिए कोई भी प्रतिपादन तर्क या शैली जो इन स्थिरांक पर निर्भर करते हैं, इस फ़ंक्शन को हर रेंडर पर कॉल करने की कोशिश करनी चाहिए, बजाय मूल्य को कैशिंग करने के (उदाहरण के लिए, उपयोग करके) स्टाइल स्टाइलशीट में मान सेट करने के बजाय इनलाइन स्टाइल)। "

— फिल

ध्यान दें कि यदि आप परिदृश्य का समर्थन करते हैं और उन लेआउट परिवर्तनों को मैन्युअल रूप से नहीं संभालते हैं, तो आयाम का उपयोग करने से आपकी लेआउट पोस्ट स्क्रीन रोटेशन टूट जाती है।

— ratsimihah

Answer 4

अपनी स्टाइलशीट में, सीधे शब्दों में कहें:

width: '80%';

के बजाय:

width: 80%;

कोडिंग रखें ........ :)

Answer 5

आप प्रतिक्रिया-मूल-विस्तारित-स्टाइलशीट भी आज़मा सकते हैं जो एकल-अभिविन्यास एप्लिकेशन के लिए प्रतिशत का समर्थन करता है:

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

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

Answer 6

माता-पिता की प्रतिशत चौड़ाई के लिए मैं जिस तकनीक का उपयोग करता हूं वह कुछ फ्लेक्सबॉक्स के साथ संयोजन में एक अतिरिक्त स्पेसर दृश्य जोड़ रही है। यह सभी परिदृश्यों पर लागू नहीं होगा लेकिन यह बहुत मददगार हो सकता है।

तो अब हम शुरू करें:

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

मूल रूप से फ्लेक्स संपत्ति फ्लेक्स कंटेनर में सभी वस्तुओं के "कुल" फ्लेक्स के सापेक्ष चौड़ाई है। इसलिए यदि सभी आइटम 100 पर हैं तो आपके पास प्रतिशत है। उदाहरण में, मैं एक ही परिणाम के लिए फ्लेक्स मान 6 और 4 का उपयोग कर सकता था, इसलिए यह और भी अधिक लचीला है।

यदि आप प्रतिशत चौड़ाई को देखना चाहते हैं: आधी चौड़ाई के साथ दो स्पेसर जोड़ें। इसलिए उदाहरण में यह 2-6-2 होगा।

बेशक अतिरिक्त विचारों को जोड़ना दुनिया में सबसे अच्छी बात नहीं है, लेकिन एक वास्तविक दुनिया ऐप में मैं स्पेसर की छवि बना सकता हूं जिसमें अलग सामग्री होगी।

Comments

आप कल्पना कर सकते हैं कि स्पेसर में अलग-अलग सामग्री होगी? क्यों? मैं कई उदाहरणों के बारे में सोच सकता हूं जहां एक स्पेसर सिर्फ फिलर html है।

— AlxVallejo

Answer 7

मेरे पास एक अद्यतन समाधान है (2019 के अंत में), हुक के साथ माता-पिता की 80% चौड़ाई को जिम्मेदारी से प्राप्त करने के लिए यह काम करता है भले ही डिवाइस घूमता हो।

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

Answer 8

इस तरह से मुझे समाधान मिल गया है। सरल और मीठा। स्क्रीन घनत्व का स्वतंत्र:

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

Answer 9

देखने के लिए चौड़ाई लागू करके प्राप्त करने का सबसे आसान तरीका है।

width: '80%'