Я пробовал пакет response-native-hr - у меня не работает ни на Android, ни на iOS.

Следующий код также не подходит, потому что он отображает три точки в конце

               
    ______________________________________________________________

humkins

Ответов: 19

Ответы (19)

Вы можете просто использовать пустой View с нижней границей.


Просто создайте View-компонент небольшой высоты.


Вот как я решил разделитель с горизонтальными линиями и текстом в середине:


  
  OR
  

И стили для этого:

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

Это код React Native (JSX), обновленный до сегодняшнего дня:



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,

и так далее для увеличения толщины линии.

Другой подход:

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

const MyComponent = () => (
  
    Lemon
    
    Mango
    
  
);

export default MyComponent;
import { View, Dimensions } from 'react-native'

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

// Create Component



import {Dimensions} from 'react-native'

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


Почему бы тебе не сделать что-то подобное?


Если у вас сплошной фон (например, белый), это может быть вашим решением:


  
  or


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

Пользуюсь этим компонентом. У него есть два реквизита: 1. Необходимое количество рывков. 2. dashWidth. и используйте его так:


type TLine = {
    dashedCount: number;
    dashWidth: number;
};

function Line({ dashedCount, dashWidth }: TLine) {
    const Dash = ({ dashWidth }) => (
        
    );
    const dashed = Array(dashedCount).fill();

    return (
        
            {dashed}
        
    );
}

Можно использовать поле, чтобы изменить ширину линии и разместить ее по центру.

import { StyleSheet } from 'react-native;


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

если вы хотите давать маржу динамически, вы можете использовать ширину размера.

Вы также можете попробовать response-native-hr-component

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

Ваш код:

import Hr from 'react-native-hr-component'

//..


У меня так получилось. Надеюсь, это поможет


OR

для стиля:

hairline: {
  backgroundColor: '#A2A2A2',
  height: 2,
  width: 165
},

loginButtonBelowText1: {
  fontFamily: 'AvenirNext-Bold',
  fontSize: 14,
  paddingHorizontal: 5,
  alignSelf: 'center',
  color: '#A2A2A2'
},

Мне удалось нарисовать разделитель со свойствами flexbox даже с текстом в центре строки.


  
  
    Hello
  
  

enter image description here

Может вам стоит попробовать использовать response-native-hr что-то вроде этого:


документация: https://www.npmjs.com/package/react-native-hr

У меня недавно была такая проблема.

 ────────  Register With  ────────

с таким результатом:

Image

Создание многоразового Line компонента сработало у меня:

импортировать React из response;
импортировать {View} из 'react-native';

функция экспорта по умолчанию Line () {
    возвращение (
        
    )
}

Теперь, импортируйте и используйте Line где угодно:

<Строка />

Вы можете использовать View, как это, для визуализации горизонтальной линии


Вы можете использовать собственный разделитель элементов.

Установите его с помощью:

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

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

Затем введите:


Источник

2022 WebDevInsider