Добавление сплошной обводки к тексту

Я пытаюсь добавить толстую сплошную обводку к тексту в React Native. Я добавил фрагмент с желаемым CSS.

Я пробовал напрямую применить CSS через стилизованные компоненты, но получаю сообщение об ошибке, указывающее, что мое значение не может быть проанализировано.

const Title = styled.Text`
  text-shadow: 2px 2px 0px  #000, -2px -2px 0px  #000, 2px -2px 0px  #000, -2px 2px 0px  #000;
`;

Я пробовал использовать textShadow, но это не дает сплошной обводки. Эта опора полагается на опору ширины и высоты для смещения.

Вот, например, закуска - https://snack.expo.io/@hannigan/ba7574

h1 {
  text-shadow: 2px 2px 0px  #000, -2px -2px 0px  #000, 2px -2px 0px  #000, -2px 2px 0px  #000;
  color: white;
  font-family: 'Arial';
}
<h1>Hello World</h1>


person Dan    schedule 24.02.2020    source источник


Ответы (2)


Так что это работает для меня, вы уверены, что это не сработает для вас с динамической высотой?

Изменить: теперь я, возможно, нашел то, о чем вы говорили. Я проверяю, могу ли я обновить закуску для работы с динамическими представлениями.

Edit2: Хорошо, заставил работать. Вам просто нужно сделать первый текст неабсолютным.

https://snack.expo.io/Bk8ifP!4I

Edit3: Как упоминал Венковский, он может сломаться, если вам нужно использовать гибкость вокруг него. Вы можете взломать его с помощью onLayout, как в этой закуске: https://snack.expo.io/HJ!PRUKNL

в основном вы сохраняете высоту текста, а затем используете ее для высоты и поля в других представлениях. Он хакерский, но я использовал его в других настройках и отлично работает.

введите описание изображения здесь

export default class App extends React.Component {

  render() {

       const myText = 'Hello World. This is my very long text, that can be a few lines height'

    return (
      <View style={styles.container}>

      <View>

        <Text style={[styles.paragraph]}>{myText}</Text>
        <Text style={[styles.paragraph, styles.abs, {textShadowOffset: {width: -2, height: -2}}]}>{myText}</Text> 
        <Text style={[styles.paragraph, styles.abs, {textShadowOffset: {width: -2, height: 2}}]}>{myText}</Text>
        <Text style={[styles.paragraph, styles.abs, {textShadowOffset: {width: 2, height: -2}}]}>{myText}</Text> 

      </View>

       <Text> 'Here another text' </Text>

      </View>
    );
  }
}

const styles = StyleSheet.create({
  container: {
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8
  },
  paragraph: { fontSize: 50, color: '#FFF', textShadowColor: 'black', textShadowRadius: 1, textShadowOffset: { 
          width: 2,
          height: 2
        }}, 
  abs: {
     position: 'absolute',
      top: 0, left: 0, right: 0, bottom: 0
    }
});
person sfratini    schedule 29.02.2020
comment
Это выглядит хорошо, но если вы добавите его вокруг View с некоторыми другими свойствами, он просто сломается - person Vencovsky; 01.03.2020
comment
@ Венцовский, что ты имеешь в виду? Посмотреть где? Как брат теневого текста? - person sfratini; 01.03.2020
comment
Обертывание представления четырьмя текстами, если вы добавите flex 1 или другие реквизиты дисплея, он сломается - person Vencovsky; 01.03.2020
comment
Хорошая мысль, вы были правы. Я добавил обходной путь с помощью onLayout. Это взломано и не на 100% идеально, ну да ладно. - person sfratini; 01.03.2020
comment
Хорошее решение, изменение размера шрифта на что-то меньшее, кажется, нарушает его. Изменение всех значений 2 на 1 добавляет нежелательную тень, удаление любых свойств, связанных с тенями, приводит к разрыву сплошной линии. - person Dan; 02.03.2020
comment
@Dan В этом случае вам, вероятно, понадобится шрифт Light или что-то, что позволит вам добавить тень и оставить немного места, чтобы этого избежать. Хотя не пробовал. - person sfratini; 03.03.2020

Я не мог найти способ сделать это с помощью css response native, но я нашел способ сделать топление в тексте с помощью _ 1_

<Svg height="60" width="200">
  <Text
    fill="none"
    stroke="purple"
    fontSize="20"
    fontWeight="bold"
    x="100"
    y="20"
    textAnchor="middle"
  >
    STROKED TEXT
  </Text>
</Svg>

введите описание изображения здесь

Редактировать

Я знаю, что этот ответ не идеален, но пока что это единственный ответ, который я нашел для этого, но, к сожалению, он не подходит для динамического текста.

person Vencovsky    schedule 24.02.2020
comment
Я пробовал это решение, но есть ли способ динамически отображать многострочный текст? Добавление абзаца Lorem Ipsum все портит. Высота SVG также должна быть динамической, поскольку контент возвращается из API. - person Dan; 24.02.2020
comment
@Dan Что вы можете попробовать, так это реализовать View с двумя Text внутри с абсолютной возможностью, где один Text на n пикселей больше, чем, поэтому он выглядит как граница - person Vencovsky; 24.02.2020
comment
Да, к сожалению, это было одно из немногих решений, которые я нашел, - иметь 4 компонента Text, отображающих тень текста и позиционированных как абсолютное. - person Dan; 24.02.2020
comment
Проблема с вышеизложенным состоит в том, что наличие абсолютных текстовых элементов позиции означает, что я не могу обернуть их вокруг родительского элемента. Если я знаю, что текст будет состоять из двух строк, я могу жестко запрограммировать высоту для родительского элемента, но объем текста будет динамическим. - person Dan; 27.02.2020
comment
На самом деле я использовал это решение, и оно не будет выглядеть нормально, поэтому я не опубликовал его. Шрифт будет каким-то образом искажаться, и перекрытие будет не идеальным. - person sfratini; 01.03.2020
comment
Хорошо, все заработало, только что отправил ответ. Надеюсь, это сработает и для вас. - person sfratini; 01.03.2020