রিএ্যাক্ট নেটিভ মধ্যে অনুভূমিক নিয়ম আঁকুন

Question

আমি দেশীয়-ঘন্টা প্যাকেজ প্রতিক্রিয়া চেষ্টা করেছি - না আমার জন্য অ্যান্ড্রয়েড বা iOS এ কাজ করে না।

নিম্নলিখিত কোডটিও উপযুক্ত নয় কারণ এটি শেষে তিনটি বিন্দু সরবরাহ করে

<Text numberOfLines={1}}>               
    ______________________________________________________________
</Text>

Comments

<পাঠ> __________ স্তর {স্তর} __________ </txt>

— ওমর বখশ

Answer 1

আপনি কেবল নীচের সীমানা সহ খালি ভিউ ব্যবহার করতে পারেন।

<View
  style={{
    borderBottomColor: 'black',
    borderBottomWidth: 1,
  }}
/>

Comments

আমি প্রস্তাব দিচ্ছি borderBottomWidth: StyleSheet.hairlineWidth:)

— রায়ান পার্জেন্ট

যদি এটি কাজ না করে তবে alignSelf: 'প্রসারিত' যুক্ত করে বিবেচনা করুন।

— বিজ্ঞানী

দেখার জন্য আপনার WIDTH মান নির্দিষ্ট করা উচিত।

— মোহাম্মদ বেন হার্টজ

এর সাহায্যে লাইন আঁকতে সক্ষম তবে বাম এবং ডানদিকে একটি মার্জিন রয়েছে। আমি শেষের দিকে

— অভি

@ অভিকে এমন একটি সমস্যার মতো মনে হচ্ছে যা এই উত্তরের সাথে সম্পর্কিত নয়। আপনি যদি কোনও সমাধান খুঁজে না পান তবে একটি নতুন প্রশ্ন তৈরি করুন

— এন্টোইন গ্র্যান্ডচ্যাম্প

Answer 2

একটি লাইনের প্রস্থ পরিবর্তন করতে এবং এটিকে কেন্দ্র করে রাখার জন্য কেউ মার্জিন ব্যবহার করতে পারে।

import { StyleSheet } from 'react-native;
<View style = {styles.lineStyle} />

const styles = StyleSheet.create({
  lineStyle:{
        borderWidth: 0.5,
        borderColor:'black',
        margin:10,
   }
 });

আপনি যদি গতিশীলভাবে মার্জিন দিতে চান তবে আপনি ডাইমেনশন প্রস্থ ব্যবহার করতে পারেন।

Comments

ধন্যবাদ <View style = {styles.lineStyle} />;-)

— -র

স্মিট এখানে styles.lineStyleএকটি অনুরূপ হবে const styles = StyleSheet.create({ lineStyle: ... });। আপনার কেবল আছে lineStyle = { ...}যা একটি সমস্যার কারণ হতে পারে। সঙ্গে একটি সম্পূর্ণ সমাধান styles.lineStyleহতে পারে const styles = StyleSheet.create({ lineStyle: { borderWidth: 0.5, borderColor: 'black', margin: 10 } });।

— কেভর

হ্যাঁ তুমি ঠিক বলছো. এখানে আমি ধরে নিয়েছি যে আপনি lineStyleআপনার স্টাইলশীটের ভিতরে রেখেছেন ।

— স্মৃতি

Answer 3

আমি সম্প্রতি এই সমস্যা ছিল।

<Text style={styles.textRegister}> ────────  Register With  ────────</Text>

এই ফলাফল সহ:

Comments

এটি ভাল স্কেল করে না

— পেট্রাস থেরন

এর মত সহজ.

— সিরাজ আলম

@ পেট্রাসথেরন কেন এটি ভালভাবে মাপছে না?

— নেট গ্লেন

@ নেটগ্লেন হাইফেনগুলি একটি সংকীর্ণ প্রদর্শনে আবৃত হবে বা আরও বিস্তৃত ডিসপ্লেতে খুব পাতলা প্রদর্শিত হবে।

— পেট্রুস থেরন

আহ, এটা বোঝা যায়। আমি মনে করি যদি সমাধান খুব ভাল হয় যদি আপনার খুব খুব স্বল্প লাইনের প্রয়োজন হয়।

— নাট গ্লেন

Answer 4

আমি এটি এই মত করে। আশাকরি এটা সাহায্য করবে

<View style={styles.hairline} />
<Text style={styles.loginButtonBelowText1}>OR</Text>
<View style={styles.hairline} />

শৈলীর জন্য:

hairline: {
  backgroundColor: '#A2A2A2',
  height: 2,
  width: 165
},

loginButtonBelowText1: {
  fontFamily: 'AvenirNext-Bold',
  fontSize: 14,
  paddingHorizontal: 5,
  alignSelf: 'center',
  color: '#A2A2A2'
},

Comments

আমি মনে করি এটি সেরা সমাধান। অন্যান্য উত্তরের মতো সীমানা ব্যবহার করা ভাল।

— এরিক এম স্প্রেঞ্জেল

হার্ডকোডিংয়ের প্রস্থ কিছুটা সমস্যা হতে পারে।

— গডফ্রে

Answer 5

আমি flexboxলাইনের মাঝে একটি পাঠ্য সহ এমনকি বৈশিষ্ট্য সহ একটি পৃথককারী আঁকতে সক্ষম হয়েছি ।

<View style={{flexDirection: 'row', alignItems: 'center'}}>
  <View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
  <View>
    <Text style={{width: 50, textAlign: 'center'}}>Hello</Text>
  </View>
  <View style={{flex: 1, height: 1, backgroundColor: 'black'}} />
</View>

Comments

এটি সেরা উত্তর, এটি স্কেল করে এবং যদি আপনি কোনও পাঠ্য প্রস্থ নির্ধারণ না করেন তবে এটি গতিশীল হবে

— newoda

Answer 6

আপনি চেষ্টা করতে পারেন react-native-hr-component

npm i react-native-hr-component --save

তোমার গোপন সংকেত:

import Hr from 'react-native-hr-component'

//..

<Hr text="Some Text" fontSize={5} lineColor="#eee" textPadding={5} textStyles={yourCustomStyles} hrStyles={yourCustomHRStyles} />

Comments

এটি ওভারকিলের কিছুটা

— নেতৃত্বে

Answer 7

এটি প্রতিক্রিয়া নেটিভ (জেএসএক্স) কোডে রয়েছে, আজকে আপডেট হয়েছে:

<View style = {styles.viewStyleForLine}></View>

const styles = StyleSheet.create({
viewStyleForLine: {
    borderBottomColor: "black", 
    borderBottomWidth: StyleSheet.hairlineWidth, 
    alignSelf:'stretch',
    width: "100%"
  }
})

আপনি ব্যবহার করতে পারেন পারেন alignSelf:'stretch'বা width: "100%"উভয় কাজ করা উচিত ... আর,

borderBottomWidth: StyleSheet.hairlineWidth

এখানে StyleSheet.hairlineWidthসবচেয়ে পাতলা,

borderBottomWidth: 1,

এবং তাই লাইন বেধ বৃদ্ধি।

Answer 8

পুনরায় ব্যবহারযোগ্য Lineউপাদান তৈরি করা আমার পক্ষে কাজ করেছে:

import React from 'react';
import { View } from 'react-native';

export default function Line() {
    return (
        <View style={{
            height: 1,
            backgroundColor: 'rgba(255, 255, 255 ,0.3)',
            alignSelf: 'stretch'
        }} />
    )
}

এখন, আমদানি করুন এবং যে Lineকোনও জায়গায় ব্যবহার করুন:

<Line />

Answer 9

import { View, Dimensions } from 'react-native'

var { width, height } = Dimensions.get('window')

// Create Component

<View style={{
   borderBottomColor: 'black', 
   borderBottomWidth: 0.5, 
   width: width - 20,}}>
</View>

Answer 10

আপনি নেটিভ এলিমেন্ট ডিভাইডার ব্যবহার করতে পারেন।

এটি দিয়ে এটি ইনস্টল করুন:

npm install --save react-native-elements
# or with yarn
yarn add react-native-elements

import { Divider } from 'react-native-elements'

তারপরে যান:

<Divider style={{ backgroundColor: 'blue' }} />

সূত্র

Comments

একটি সম্পূর্ণ প্যাকেজ ইনস্টল করা (এবং সম্ভবত একটি বড় একটি) সম্ভবত আপনার যদি একটি অনুভূমিক রেখা প্রয়োজন তবে ওভারকিলের মতো মনে হয়।

— স্যান্ডি

অনুমোদিত যে আপনি কেবলমাত্র <Divider /> উপাদানটি ব্যবহার করছেন যদি তা ওভারকিল হয় তবে আপনার সাধারণ বাটন, অনুসন্ধান বার ইত্যাদির স্টাইলিংয়ে সময় বাঁচানোর জন্য কোনও উপায়ে একটি লাইব্রেরি ব্যবহার করা উচিত ... এটি আপনার অ্যাপ্লিকেশনটির জন্য যা করতে পারে তার সব চেকআউট করুন প্রতিক্রিয়া-

— নেটিভ-

Answer 11

তুমি কেন এমন কিছু করো না?

<View
  style={{
    borderBottomWidth: 1,
    borderBottomColor: 'black',
    width: 400,
  }}
/>

Answer 12

হতে পারে আপনার প্রতিক্রিয়া-স্থানীয়-ঘন্টা এই জাতীয় কিছু ব্যবহার করার চেষ্টা করা উচিত:

<Hr lineColor='#b3b3b3'/>

ডকুমেন্টেশন: https://www.npmjs.com/package/react-native-hr

Comments

রেপোতে ইস্যুগুলি খুঁজছেন, এটি নির্ভরতার শর্তে এতটা "সক্রিয়" এবং আপ টু ডেট বলে মনে হয় না :(

— চাঁদে তৈরি

Answer 13

import {Dimensions} from 'react-native'

const { width, height } = Dimensions.get('window')

<View
  style={{
         borderBottomColor: '#1D3E5E',
         borderBottomWidth: 1,
         width : width , 
  }}
/>

Comments

কোডটি তাদের পক্ষে কীভাবে এই ধরণের সমস্যা রয়েছে তার পক্ষে এটি স্পষ্ট, তাই আমি যদি আরও ব্যাখ্যা করতে পারি তবে আমি এটি করব।

— মোহাম্মদ বেন হার্টজ

Answer 14

এইভাবে আমি বিভক্তর মধ্যে অনুভূমিক রেখা এবং পাঠ্য দিয়ে বিভাজকের সমাধান করেছি:

<View style={styles.divider}>
  <View style={styles.hrLine} />
  <Text style={styles.dividerText}>OR</Text>
  <View style={styles.hrLine} />
</View>

এবং এর জন্য শৈলীসমূহ:

import { Dimensions, StyleSheet } from 'react-native'

const { width } = Dimensions.get('window')

const styles = StyleSheet.create({
divider: {
    flexDirection: 'row',
    alignItems: 'center',
    marginTop: 10,
  },
  hrLine: {
    width: width / 3.5,
    backgroundColor: 'white',
    height: 1,
  },
  dividerText: {
    color: 'white',
    textAlign: 'center',
    width: width / 8,
  },
})

Answer 15

কেবল একটি ভিউ উপাদান তৈরি করুন যার উচ্চতা ছোট।

<View style={{backgroundColor:'black', height:10}}/>

Answer 16

আপনার যদি দৃ solid় পটভূমি থাকে (সাদা হিসাবে) তবে এটি আপনার সমাধান হতে পারে:

<View style={container}>
  <View style={styles.hr} />
  <Text style={styles.or}>or</Text>
</View>

const styles = StyleSheet.create({
  container: {
    flex: 0,
    backgroundColor: '#FFFFFF',
    width: '100%',
  },
  hr: {
    position: 'relative',
    top: 11,
    borderBottomColor: '#000000',
    borderBottomWidth: 1,
  },
  or: {
    width: 30,
    fontSize: 14,
    textAlign: 'center',
    alignSelf: 'center',
    backgroundColor: '#FFFFFF',
  },
});