Question

我尝试过react-native-hr套餐 - 不适用于我，Android也不适用于iOS。

以下代码也不合适，因为它在末尾呈现三个点

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

Answer 1

您可以简单地使用带有底部边框的空视图。

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

Answer 2

可以使用边距来改变线条的宽度并将其放在中心位置。

import { StyleSheet } from 'react-native;
<View style = {styles.lineStyle} />

const styles = StyleSheet.create({
  lineStyle:{
        borderWidth: 0.5,
        borderColor:'black',
        margin:10,
   }
 });

如果您想动态提供保证金，则可以使用尺寸宽度。

Answer 3

即使在行的中心有文本，我也可以绘制具有await t.expect(await StatusOnProgressIcon.exists).notOk('Unexistence of On progress status icon', { timeout: 120000 })属性的分隔符。

flexbox

Answer 4

我最近遇到了这个问题。

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

有了这个结果：

Answer 5

我是这样做的。希望这有帮助

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

Answer 6

您还可以尝试library(splitstackshape) library(tidyverse) df %>% group_by(DeviceId) %>% summarise_all(function(x) paste0(x, collapse = "_")) %>% cSplit(names(.)[-1], '_')

react-native-hr-component

您的代码：

npm i react-native-hr-component --save

Answer 7

创建一个可重用的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 8

你为什么不这样做？

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

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

您可以像这样使用视图来渲染水平线

<View style={{ backgroudColor : "your color", height : 1 }} />

Answer 11

<Text>----------------------------------------</Text>

另一种方法：

import { View } from 'react-native';
import { Divider, Text } from 'react-native-paper';

const MyComponent = () => (
  <View>
    <Text>Lemon</Text>
    <Divider />
    <Text>Mango</Text>
    <Divider />
  </View>
);

export default MyComponent;

Answer 12

如果您有坚实的背景（例如白色），则可以解决此问题：

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

Answer 13

只需创建一个高度较小的View组件。

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

Answer 14

这是在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,

以此类推以增加线的粗细。

Answer 15

这是我用中间的水平线和文本解决分隔线的方法：

pred

和样式：

<View style={styles.divider}>
  <View style={styles.hrLine} />
  <Text style={styles.dividerText}>OR</Text>
  <View style={styles.hrLine} />
</View>

Answer 16

import {Dimensions} from 'react-native'

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

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

Answer 17

您可以使用本机元素分隔符。

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


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

Answer 18

也许你应该尝试使用react-native-hr这样的东西：

<Hr lineColor='#b3b3b3'/>

文档：https://www.npmjs.com/package/react-native-hr

在React Native中绘制水平线

18 个答案: