React Native에서 텍스트 테두리를 만드는 방법

React Native에서 텍스트 테두리를 만드는 방법

리액트 네이티브에서 텍스트 구성요소에 글꼴 테두리를 추가하려면 어떻게 해야 합니까?

사용해보았습니다.border그리고.shadow{Color, Radius, Opacity, Offset}하지만 아직 효과가 없어요좋은 의견이라도 있나?

공식 문서에서 이 정보를 제공합니다.다음 사이트에서 찾을 수 있습니다.텍스트 컴포넌트컴포넌트의 동작과 스타일을 변경하는 데 사용할 수 있는 소품이 표시됩니다.보시는 바와 같이 일부 특정 텍스트 스타일뿐만 아니라 보기 구성요소에 적용할 수 있는 스타일도 있습니다.이 링크를 따라가면 테두리 스타일이 표시됩니다.그래서 당신이 찾고 있는 것은 다음과 같습니다.

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개의 어트리뷰트로 설정할 수 있습니다.

textShadowColor color
textShadowOffset {width: number, height: number}

예:

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

현재 안드로이드에서는 동작하지 않습니다.다음과 같은 보기 내에서 래핑해 보십시오.

<View
  style={{
    borderWidth: 1,
    borderColor: "thistle",
    borderRadius: 50,
  }}>
</View>

설정해야 합니다.borderColor그리고.borderWidth.

CSS - webkit - text - stroke 와 유사한 기능을 찾고 있다면 react-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>

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

이것은 Styles와 ScrollView의 튜토리얼을 조합한 것입니다.

적어도 borderWidth를 설정해야 합니다.정수로 설정해야 합니다.기본 테두리 색상은 검은색이며 borderColor를 사용하여 색상을 변경할 수 있습니다.

 paddingTop: 10,
 borderWidth: 1,
 borderColor: 'red'

아래 테두리를 추가해야 했습니다.Text컴포넌트는 다음과 같습니다.

다음을 수행했습니다.

테두리는 a입니다.<View/>와 함께 다른 사람의 내면에flexDirection : 'row'

코드는 다음과 같습니다.

<View style={styles.titleContainer}>
   <Text style={styles.title}>Horaire de prière</Text>
   <View style={styles.borderContainer}>
     <View style={styles.border} />
   </View>
</View>

및 스타일:

titleContainer: {
    flex: 0.2,
    alignItems:'center',
    justifyContent:'center'

  },
  title: {
    fontSize: 18,
    marginBottom:2,  
  },
  borderContainer:{
    flexDirection:'row',
    alignItems:'center',
    justifyContent:'center',

  },
  border:{
    flex:0.28,
    borderBottomWidth: 1,
    borderBottomColor: '#428947',

  },

flex를 사용하여 테두리 크기를 변경할 수 있습니다.

언급URL : https://stackoverflow.com/questions/32924616/how-to-create-text-border-in-react-native