私はreact-native-hrパッケージを試しました-私にとってもAndroidでもiOSでも機能しません。
次のコードも、最後に3つのドットをレンダリングするため、適切ではありません。
<Text numberOfLines={1}}>
______________________________________________________________
</Text>
私はreact-native-hrパッケージを試しました-私にとってもAndroidでもiOSでも機能しません。
次のコードも、最後に3つのドットをレンダリングするため、適切ではありません。
<Text numberOfLines={1}}>
______________________________________________________________
</Text>
回答:
下の境界線のある空のビューを使用するだけで済みます。
<View
style={{
borderBottomColor: 'black',
borderBottomWidth: 1,
}}
/>
borderBottomWidth: StyleSheet.hairlineWidth
:)
線の幅を変更して中央に配置するためにマージンを使用できます。
import { StyleSheet } from 'react-native;
<View style = {styles.lineStyle} />
const styles = StyleSheet.create({
lineStyle:{
borderWidth: 0.5,
borderColor:'black',
margin:10,
}
});
マージンを動的に指定する場合は、寸法幅を使用できます。
<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
、スタイルシートの中に入れていると仮定します。
私はこのようにしました。お役に立てれば
<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'
},
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>
これはReactNative(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,
など、線の太さを増やします。
再利用可能な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 />
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>
ネイティブ要素の仕切りを使用できます。
それをインストールします:
npm install --save react-native-elements
# or with yarn
yarn add react-native-elements
import { Divider } from 'react-native-elements'
次に、一緒に行きます:
<Divider style={{ backgroundColor: 'blue' }} />
<Divider />
コンポーネントのみを使用する場合はやり過ぎですが、シンプルなボタンや検索バーなどのスタイリングにかかる時間を節約するために、どちらの方法でもライブラリを使用する必要があります。アプリでできることをすべてチェックしてください。react-native-elements.github.io/react-native-elements
たぶん、react-native-hrを次のように使用してみてください。
<Hr lineColor='#b3b3b3'/>
import {Dimensions} from 'react-native'
const { width, height } = Dimensions.get('window')
<View
style={{
borderBottomColor: '#1D3E5E',
borderBottomWidth: 1,
width : width ,
}}
/>
これは私が真ん中に水平線とテキストで仕切りを解決した方法です:
<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,
},
})
背景が無地(白など)の場合は、これが解決策になる可能性があります。
<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',
},
});