react-native-hr 패키지를 사용해 보았습니다 -나에게도, Android 나 iOS에서도 작동하지 않습니다.
다음 코드는 끝에 세 개의 점을 렌더링하기 때문에 적합하지 않습니다.
<Text numberOfLines={1}}>
______________________________________________________________
</Text>
답변
하단 테두리가있는 빈 뷰를 간단히 사용할 수 있습니다.
<View
style={{
borderBottomColor: 'black',
borderBottomWidth: 1,
}}
/>
답변
여백을 사용하여 선의 너비를 변경하고 중앙에 배치 할 수 있습니다.
import { StyleSheet } from 'react-native;
<View style = {styles.lineStyle} />
const styles = StyleSheet.create({
lineStyle:{
borderWidth: 0.5,
borderColor:'black',
margin:10,
}
});
여백을 동적으로 제공하려면 Dimension width를 사용할 수 있습니다.
답변
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>
답변
답변
이렇게 했어요. 도움이 되었기를 바랍니다
<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'
},
답변
시도해 볼 수도 있습니다. 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} />
답변
이것은 오늘 업데이트 된 React Native (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,
선의 두께를 늘리기 위해 등등.