प्रतिक्रियाशील मूल में क्षैतिज नियम ड्रा करें

Question

मैंने प्रतिक्रिया-मूल-घंटा पैकेज की कोशिश की है - मेरे लिए न तो एंड्रॉइड पर और न ही iOS पर काम करता है।

निम्नलिखित कोड भी उपयुक्त नहीं है क्योंकि यह अंत में तीन डॉट्स प्रदान करता है

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

Comments

<पाठ> __________ स्तर {स्तर} __________ </ पाठ>

— उमर बख्श

Answer 1

आप बस नीचे की सीमा के साथ एक खाली दृश्य का उपयोग कर सकते हैं।

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

Comments

मैं सलाह देता हूं borderBottomWidth: StyleSheet.hairlineWidth:)

— रेयान परजेंट

अगर यह संरेखित करने पर विचार नहीं करता है तो काम करें: 'खिंचाव'।

— साइंटिस्ट

आपको दृश्य के लिए 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} />बाद से बीच में कुछ भी नहीं है ;-)

— मार्टिन Nordström

Smit यहाँ के 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

यह अच्छी तरह से पैमाने पर नहीं है

— पेट्रिस थेरॉन

इतना सरल है।

— सिराज आलम

@PetrusTheron अच्छी तरह से स्केल क्यों नहीं करता है?

— नाटे ग्लेन

@ नैटगेन हाइफ़न एक संकीर्ण डिस्प्ले पर लपेटेगी या व्यापक प्रदर्शन पर बहुत पतली दिखाई देगी।

— पेट्रस थेरोन

आह, यह समझ में आता है। मुझे लगता है कि समाधान ठीक है अगर आपको केवल बहुत छोटी रेखा की आवश्यकता है।

— नैट ग्लेन

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

यह रिएक्टिव नेटिव (JSX) कोड में है, जिसे आज अपडेट किया गया है:

<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 /> घटक का उपयोग कर रहे हैं, तो यह ओवरकिल है , हालांकि, आपको साधारण बटन, खोज बार्स इत्यादि को स्टाइल करने में समय बचाने के लिए एक पुस्तकालय का उपयोग करना चाहिए ... आदि। यह सब अपने ऐप के लिए कर सकते हैं। प्रतिक्रिया-native-elements.github.io/react-native-elements

— jso1919

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

यदि आपके पास एक ठोस पृष्ठभूमि है (जैसे सफेद), तो यह आपका समाधान हो सकता है:

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