2017-04-12 22 views
11

में क्षैतिज नियम बनाएं मैंने react-native-hr पैकेज का प्रयास किया है - मेरे लिए और न ही एंड्रॉइड पर और न ही आईओएस पर काम करता है।प्रतिक्रिया मूल

के बाद कोड भी उपयुक्त है क्योंकि यह अंत

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

उत्तर

46

मौजूद तीन बिंदु renders आप बस एक निचली सीमा के साथ एक खाली दृश्य इस्तेमाल कर सकते हैं नहीं है।

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

मैं इस तरह के बारे में सोचना चाहिए। धन्यवाद! – gumkins

+2

मैं 'borderBottomWidth की सिफारिश करता हूं: StyleSheet.hairlineWidth' :) –

+0

यदि यह काम नहीं करता है तो संरेखण जोड़ने पर विचार करें: 'खिंचाव'। – Scientist1642

2
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> 
0

हो सकता है कि आप इस तरह से प्रतिक्रिया देशी घंटे का कुछ का उपयोग कर प्रयास करना चाहिए लाइन और इसे केंद्र रखें।

<View style = {styles.lineStyle} /> 

lineStyle:{ 
     borderWidth: 0.5, 
     borderColor:'black', 
     margin:10, 
    } 

यदि आप गतिशील रूप से मार्जिन देना चाहते हैं तो आप आयाम चौड़ाई का उपयोग कर सकते हैं।

5

एक क्रम में मार्जिन उपयोग कर सकते हैं एक की चौड़ाई बदलने के लिए

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

धन्यवाद। आप बस '<शैली देखें = {style.lineStyle} />' क्योंकि कुछ भी बीच में नहीं हो सकता ;-) –

+0

आपका स्वागत है। संपादित! – Smit

2

मुझे हाल ही में यह समस्या थी।

<Text style={styles.textRegister}> ──────── Register With ────────</Text> 
इस परिणाम के साथ

:

Image

+1

यह अच्छी तरह से स्केल नहीं करता है –

0

मैं इसे इस तरह से किया था। आशा है कि इस मदद करता है

<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' 
}, 
0

तुम भी कोशिश कर सकते हैं 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} /> 
संबंधित मुद्दे