reactjs - 有没有办法在 react-native 中将背景颜色包裹在文本周围？

Question

目前，这是我试图避免的。如您所见，背景颜色一直运行到宽度的末尾。文本周围的背景颜色会很好。

我查看了大量示例，但我并没有真正看到它们在文本本身周围环绕背景颜色的位置

<Text style={{backgroundColor:'blue'}}> TTeexxtt </Text>

我尝试过使用 flexWrap，但它并不像这样工作

<Text style={{backgroundColor:'blue', flexWrap:'wrap'}}> TTeexxtt </Text>

一如既往，谢谢

Answer 1

React Native 中的 View 默认为 alignItems 属性的拉伸(stretch)。但这意味着什么？

您 View 的所有 subview 都将拉伸(stretch)以填充其父 View 的宽度，并考虑边距。

如果您将父 View 的 alignItems 属性设置为 stretch 以外的属性，例如 center、flex-start 或 flex-end 你会看到背景颜色只在你的实际文本周围延伸。

您还可以在 Text View 上使用 alignSelf 来调整单个项目。

这是一个示例小吃 https://snack.expo.io/@ajthyng/vengeful-celery

import * as React from 'react';
import { Text, View, StyleSheet } from 'react-native';

const BGText = props => {
  const { background } = props;
  return <Text style={{backgroundColor: background, ...props.style}}>{props.children}</Text>;
}

export default class App extends React.Component {
  render() {
    return (
      <View style={{flex: 1, backgroundColor: 'white', alignItems: 'stretch', marginTop: 23}}>
        <BGText background='pink' style={{marginRight: 16}}>I am some text</BGText>
        <BGText background='orange' style={{alignSelf: 'flex-start', marginLeft: 16}} >My BG Color is short</BGText>
      </View>
    );
  }
}