Вывести строковую переменную в SVG в React-Native - PullRequest
Новая
       14

Вывести строковую переменную в SVG в React-Native

0 голосов
/ 25 марта 2020

Я пытаюсь отобразить инициалы пользователя (в основном текст) на (или внутри) аватаре (SVG). Я нашел много тем на эту тему, но ни один из синтаксисов, которые я пробовал, не работал для меня. Я также использую здесь TypeScript. 

import React from 'react';
import { View, TextInput, Text } from 'react-native';
import { Svg, Text as SvgText } from "react-native-svg"
import LogoAvatar from '../svg/avatar';

export default function FieldInput() {
    const [firstName, setFirstName] = React.useState('');
    const [lastName, setLastName] = React.useState('');
    const initials = (firstName[0] || "") + (lastName[0] || "")

    return (
        <>
            <View>
                <TextInput
                    onChangeText={setFirstName}
                    value={firstName}
                    placeholder="First Name"
                />
                <TextInput
                    onChangeText={setLastName}
                    value={lastName}
                    placeholder="Last Name"
                />
            </View>
            <Text>{initials}</Text> {/* This displays, but nothing below does */}

            <View>
                <Svg>
                    <SvgText>text</SvgText>
                    <Text>text</Text>
                    <LogoAvatar text={initials}>
                        <text textAnchor="middle" >Hello</text>
                        <SvgText>text</SvgText>
                        <Text>text</Text>
                    </LogoAvatar>
                </Svg>
            </View>
        </>
    );
}
...