如何将组件放置在文本行的末尾

Question

我想在多行文本的末尾放置一个组件。将文本和组件包装在视图中并将其伸缩方向设置为行无济于事。

这是我要完成的工作：

这是代码

<View style={{ flexDirection: 'row' }}
<Text>
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum
</Text>
<Component />
</View>

组件代码：

<View style={{width: width, borderRadius: width/2}}>
<Text>{children}</Text>
</View>

Answer 1

不幸的是，您不能在<View>组件中放置<Text>，但是我为您提供了一种使用react-native-svg的解决方法。当然，这只是一个演示，您可能必须对其进行调整/微调。

您可以通过以下方式安装react-native-svg：

npm install --save react-native-svg

组件代码：

import Svg, { Circle } from 'react-native-svg'; 
...
const TestComponent = ({ children }) => {
  return (
    <Svg height="35" width="100">
      <Circle cx="15" cy="20" r="15" fill="blue" />
      <Svg.Text x="25" y="25" fill="#000" fontSize="15" textAnchor="middle" fontWeight="bold" > 
        {children}
      </Svg.Text>
      <Svg.Text x="75" y="25" fill="#000" fontSize="15" textAnchor="middle" fontWeight="bold" >
       {children}
      </Svg.Text>
    </Svg>
  );
}

示例：

工作演示：

https://snack.expo.io/rJZlZBX2V

编辑： 此解决方法仅适用于iOS。