web-dev-qa-db-ja.com

React Native？

React-Nativeでは、テキストコンポーネントにフォントボーダーを追加するにはどうすればよいですか？

borderとshadow{Color, Radius, Opacity, Offset}を使用してみましたが、うまくいきませんでした。助言がありますか？

cssreactjsreact-native
25
henkimon

公式ドキュメントにはこの情報があります。このサイトで見つけることができます： Text 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
22
webwelten

現在、Androidでは機能していません。 <View style={{borderWidth: 1}}/>でラップしてみてください

12
chinloong

borderColorとborderWidthを設定する必要があります。

10
KChen

次の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,
  },
10
Trần Hồng Điệp

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

enter image description here

Styles と ScrollView のチュートリアルを組み合わせて使用​​していました

4
Scott Skiles

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

少なくともborderWidthを設定する必要があります。整数に設定する必要があります。デフォルトの境界線の色は黒ですが、borderColorで色を変更できます

1
Dustin Sanders