How to create text border in React Native?

前端 未结 9 1552
清歌不尽
清歌不尽 2021-02-01 14:14

In React-Native, how do I add font borders to Text-components?

I\'ve tried using border and shadow{Color, Radius, Opacity, Offset}, but haven\'

9条回答
  •  再見小時候
    2021-02-01 14:40

    As noted by KChen, you need to add both borderColor and borderWidth. Just updating this answer for later versions of ReactNative (note the usage of 'styles.bigblue').

    import React, { Component } from 'react';
    import { AppRegistry, StyleSheet, ScrollView, Image, Text } from 'react-native';
    
    export default class HelloWorldWithBorder extends Component {
            render() {
                    return (
                                    
                                    HelloWorld WithBorder
                                    HelloWorld WithBorder
                                    HelloWorld WithBorder
                                    HelloWorld WithBorder
                                    HelloWorld WithBorder
                                    HelloWorld WithBorder
                                    HelloWorld WithBorder
                                    HelloWorld WithBorder
                                    HelloWorld WithBorder
                                    
                           );
            }
    }
    
    
    const styles = StyleSheet.create({
            bigblue: {
                    color: 'blue',
                    fontWeight: 'bold',
                    fontSize: 20,
                    borderColor: 'black',
                    borderWidth: 1
            }
    });
    

    This was using a combination of the tutorial from Styles and ScrollView

提交回复
热议问题