在React Native中使用图像渲染文本

Question

如何在右边渲染带图像的段落， 屏幕设计应类似于屏幕截图

Answer 1

React Native不支持您想要的文本对齐方式。您可以通过在自己的Text组件中呈现每个段落，然后为包含图像的段落呈现以下内容，一次模拟一个段落的效果：

<View style={{flexDirection: 'row'}}>
  <Text>Lorem ipsum dolor......</Text>
  <Image source={require('./path/to/image.png')} />
</View>

您可能想要在图片组件中添加一些左边距，这样文字就不会向右运行。

Answer 2

你可以尝试：

let pic = {
  uri: 'https://upload.wikimedia.org/wikipedia/commons/d/de/Bananavarieties.jpg'
};

return(
  <View style={styles.container}>
    <Image source={pic} style={{width: 360, height: 110}}/>
    <Text>React Application Works fine!</Text>
  </View>
);