নেটিভ রিএটিভ মধ্যে পিতামাতার 80% প্রস্থের দর্শন করুন

Question 1

আমি প্রতিক্রিয়া নেটিভ এ একটি ফর্ম তৈরি করছি এবং আমার TextInputস্ক্রিনের প্রস্থের 80% তৈরি করতে চাই ।

এইচটিএমএল এবং সাধারণ সিএসএসের সাহায্যে এটি সোজা হবে:

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

প্রতিক্রিয়া নেটিভ ব্যতীত displayসম্পত্তি, শতাংশ প্রস্থ বা অটো মার্জিনকে সমর্থন করে না ।

তার পরিবর্তে আমার কী করা উচিত? আছে এই সমস্যার কিছু আলোচনা দেশীয় এর ইস্যু যে ব্যক্তি অনুসরণ করে প্রতিক্রিয়া কিন্তু প্রস্তাবিত সমাধানের কদর্য হ্যাক ভালো বলে মনে হচ্ছে।

Question 2

নেটিভ 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

আপনি যদি কেবল স্ক্রিনের প্রস্থের সাথে সামঞ্জস্য রেখে ইনপুটটি দেখতে চান তবে একটি সহজ উপায় হ'ল মাত্রা ব্যবহার করা:

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

আপনার স্টাইলশিটে, সহজভাবে লিখুন:

width: '80%';

পরিবর্তে:

width: 80%;

কোডিং রাখুন ........ :)

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

মূলত ফ্লেক্স সম্পত্তি হ'ল ফ্লেক্স ধারক মধ্যে সমস্ত আইটেম "মোট" ফ্লেক্স তুলনায় প্রস্থ। সুতরাং যদি সমস্ত আইটেমের পরিমাণ 100 হয় তবে আপনার শতাংশের পরিমাণ আছে। উদাহরণস্বরূপ আমি একই ফলাফলের জন্য 6 এবং 4 এর ফ্লেক্স মানগুলি ব্যবহার করতে পারি, সুতরাং এটি আরও বেশি নমনীয়।

আপনি যদি শতাংশের প্রস্থের কেন্দ্রটি দেখতে চান: অর্ধ প্রস্থের সাথে দুটি স্পেসার যুক্ত করুন। উদাহরণস্বরূপ এটি 2-6-2 হবে।

অবশ্যই অতিরিক্ত ভিউগুলি যুক্ত করা বিশ্বের সেরা জিনিস নয়, তবে একটি বাস্তব বিশ্বের অ্যাপ্লিকেশনটিতে আমি স্পেস করতে পারি যে স্পেসারটিতে বিভিন্ন সামগ্রী থাকবে।

Question 8

আমার কাছে একটি আপডেট সমাধান রয়েছে (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',
     },
});

Question 9

এইভাবে সমাধানটি পেলাম। সরল এবং মিষ্টি। পর্দার ঘনত্বের স্বতন্ত্র:

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

অর্জনের সহজ উপায় হ'ল প্রস্থকে দেখার জন্য।

width: '80%'