ReactNativeで水平方向のルールを描画する


96

私はreact-native-hrパッケージを試しました-私にとってもAndroidでもiOSでも機能しません。

次のコードも、最後に3つのドットをレンダリングするため、適切ではありません。

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

<テキスト> __________レベル{レベル} __________ </テキスト>
Omar bakhsh

回答:


294

下の境界線のある空のビューを使用するだけで済みます。

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

49
私はお勧めしますborderBottomWidth: StyleSheet.hairlineWidth:)
ライアンパージェント2017年

16
それが機能しない場合は、alignSelf: 'stretch'を追加することを検討してください。
科学者

1
ビューのWIDTH値を指定する必要があります。
Mohamed BenHartouz19年

これにより線を引くことができますが、左右にマージンがあります。私が最後に終止符を描きたい
Abhi

@Abhiそれはこの答えとは関係のない問題のようです。解決策が見つからない場合は、新しい質問を作成してください
AntoineGrandchamp19年

22

線の幅を変更して中央に配置するためにマージンを使用できます。

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} />何も;-)間ではありませんので、
マーティン・ノードストローム

Smitstyles.lineStyleconst styles = StyleSheet.create({ lineStyle: ... });ここに対応します。あなたはただlineStyle = { ...}問題を引き起こすだろうものを持っています。の完全な解決策styles.lineStyleはですconst styles = StyleSheet.create({ lineStyle: { borderWidth: 0.5, borderColor: 'black', margin: 10 } });
kevr 2018

ええ。あなたが正しい。ここではlineStyle、スタイルシートの中に入れていると仮定します。
スミット

12

私は最近この問題を抱えていました。

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

この結果で:

画像


25
これはうまくスケーリングしません
Petrus Theron 2018

それと同じくらい簡単です。
Siraj Alam 2018

@PetrusTheronなぜそれがうまくスケーリングしないのですか?
ネイト・グレン・

@NateGlennハイフンは、狭いディスプレイでは折り返されるか、広いディスプレイでは薄すぎるように見えます。
ペトル

ああ、それは理にかなっています。非常に短い行だけが必要な場合は、解決策は問題ないと思います。
ネイトグレン

9

私はこのようにしました。お役に立てれば

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

それが最善の解決策だと思います。他の答えのように境界線を使用するよりも優れています。
Erick M. Sprengel 2018年

幅のハードコーディングは少し問題になる可能性があります。
ゴッドフリー

9

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>

ここに画像の説明を入力してください


1
これが最良の答えです。
拡大縮小

5

あなたも試すことができます 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} />

4
それは少しやり過ぎです
導か

3

これは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,

など、線の太さを増やします。


3

再利用可能な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 />

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>

2

ネイティブ要素の仕切りを使用できます。

それをインストールします:

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

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

次に、一緒に行きます:

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

ソース


2
パッケージ全体(そしておそらく大きなもの)をインストールすることは、水平線だけが必要な場合はやり過ぎのように思えます。
サンディ

<Divider /> コンポーネントのみを使用する場合はやり過ぎですが、シンプルなボタンや検索バーなどのスタイリングにかかる​​時間を節約するために、どちらの方法でもライブラリを使用する必要があります。アプリでできることをすべてチェックしてください。react-native-elements.github.io/react-native-elements
jso1919

1

こんなことしてみませんか?

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


0
import {Dimensions} from 'react-native'

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

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

コードは、この種の問題がどのように発生するかについて非常に明確なので、もっと説明できれば、それを実行します。
Mohamed BenHartouz19年

0

これは私が真ん中に水平線とテキストで仕切りを解決した方法です:

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

0

高さが小さいViewコンポーネントを作成するだけです。

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

0

背景が無地(白など)の場合は、これが解決策になる可能性があります。

<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',
  },
});
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.