Как создать границу текста в React Native?

Ответ 1

Официальные документы имеют эту информацию для вас. Вы можете найти его на этом сайте: Текстовый компонент. Там он показывает, какие реквизиты можно использовать для изменения поведения и стиля компонента. Как видите, существуют определенные стили текста, а также стили, которые вы можете применить на View Component. И если вы будете следовать этой ссылке, она отобразит стили границы. Итак, что вы ищете, может быть:

borderColor string
borderTopColor string
borderRightColor string
borderBottomColor string
borderLeftColor string
borderRadius number
borderTopLeftRadius number
borderTopRightRadius number
borderBottomLeftRadius number
borderBottomRightRadius number
borderStyle enum('solid', 'dotted', 'dashed')
borderWidth number
borderTopWidth number
borderRightWidth number
borderBottomWidth number
borderLeftWidth number

Ответ 2

В настоящее время не работает для android. Попробуйте обернуть его в <View style={{borderWidth: 1}}/>

Ответ 3

Вам нужно установить borderColor и borderWidth.

Ответ 4

вы можете использовать границу эмулятора как два атрибута: textShadowColor color textShadowOffset {ширина: число, высота: число}

Пример:

textshadow:{
    fontSize:100,
    color:'#FFFFFF',
    fontFamily:'Times New Roman',
    paddingLeft:30,
    paddingRight:30,
    textShadowColor:'#585858',
    textShadowOffset:{width: 5, height: 5},
    textShadowRadius:10,
  },

Ответ 5

Как отмечено KChen, вам нужно добавить оба borderColor и borderWidth. Просто обновите этот ответ для более поздних версий ReactNative (обратите внимание на использование styles.bigblue).

import React, { Component } from 'react';
import { AppRegistry, StyleSheet, ScrollView, Image, Text } from 'react-native';

export default class HelloWorldWithBorder extends Component {
        render() {
                return (
                                <ScrollView>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                <Text style={styles.bigblue}>HelloWorld WithBorder</Text>
                                </ScrollView>
                       );
        }
}


const styles = StyleSheet.create({
        bigblue: {
                color: 'blue',
                fontWeight: 'bold',
                fontSize: 20,
                borderColor: 'black',
                borderWidth: 1
        }
});

Это использовало комбинацию учебника из Стили и ScrollView

Ответ 6

Вам нужно как минимум установить borderWidth, его нужно установить в целое. Цвет границы по умолчанию - черный, вы можете изменить цвет с помощью borderColor

Ответ 7

Если вы ищете что-то похожее на то, как работает CSS -webkit-text-stroke, почему бы не попробовать response-native-svg?

import Svg, { Text } from "react-native-svg";

<Svg height="50%" width="50%" viewBox="0 0 100 100">
  <Text
    stroke="black"
    strokeWidth="1"
    fill="white"
    color="#ffffff"
    fontSize="45"
  >
    Yay!
  </Text>
</Svg>