webentwicklung-frage-antwort-db.com.de

Wie erstelle ich einen Textrahmen in React Native?

Wie füge ich in React-Native Textrahmen Textrahmen hinzu?

Ich habe versucht, border und shadow{Color, Radius, Opacity, Offset} zu verwenden, habe es aber nicht verstanden. Irgendwelche Vorschläge?

19
henkimon

Die offiziellen Dokumente haben diese Informationen für Sie. Sie finden es auf dieser Site: Text Component . Dort wird angezeigt, mit welchen Requisiten Sie das Verhalten und den Stil der Komponente ändern können. Wie Sie sehen, gibt es einige spezifische Textstile, aber auch die Stile, die Sie auf eine View Component anwenden können. Wenn Sie diesem Link folgen, werden Ihnen die Randstile angezeigt. Was Sie suchen, ist vielleicht:

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
22
webwelten

Funktioniert derzeit nicht für Android. Versuchen Sie es in einen <View style={{borderWidth: 1}}/> einzuwickeln.

11
chinloong

Sie müssen borderColor und borderWidth einstellen.

6
KChen

sie können den Emulatorrand als zwei Attribute definieren: textShadowColor Farbe textShadowOffset {width: number, height: number}

Ex:

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

Wie von KChen bemerkt, müssen Sie sowohl borderColor als auch borderWidth hinzufügen. Aktualisieren Sie diese Antwort einfach für spätere Versionen von ReactNative (beachten Sie die Verwendung von '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
        }
});

 enter image description here

Dies war eine Kombination aus dem Tutorial von Styles und ScrollView

4
Scott Skiles

Sie müssen mindestens die borderWidth setzen, es muss eine ganze Zahl sein. Die Standardrandfarbe ist Schwarz. Sie können die Farbe mit borderColor ändern

1
Dustin Sanders

Wenn Sie nach etwas ähnlichem suchen, wie CSS -webkit-text-stroke funktioniert, warum nicht react-native-svg ausprobieren?

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>
0
codebreaker