Добавление solid обводки к тексту - PullRequest
Новая
       69

Добавление solid обводки к тексту

6 голосов
/ 24 февраля 2020

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

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

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

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

Вот закуска к примеру - 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>

Ответы [ 2 ]

3 голосов
/ 01 марта 2020

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

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

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

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

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

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

enter image description here

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
    }
});
3 голосов
/ 24 февраля 2020

Я не смог найти способ сделать это с помощью реагирующего натива css, но я нашел способ сделать сток в тексте с помощью react-native-svg

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

enter image description here

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

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

...