React-native如何在视图中包装文本和图像的内容

Question

我在查看文本和图片的内容时遇到问题..

我想要的是什么：

- 图像文本第1行

- 图像文本行2

基本上我试图在这个结构中编码，并将flex样式配置为'wrap'。

-Code syle 1：

<Image>
</Image>
<Text>
    Text 1
</Text>
<Text>
    Text 2
</Text>

-Code syle 2：

<Text> 
    <Image>
    </Image>
    Text 1
    Text 2
</Text>

两者都没有达到我希望的目标。这里出了什么问题？

Answer 1

这是实现目标的一种方式：

import React, { Component } from 'react';
import {
  AppRegistry,
  StyleSheet,
  Text,
  View,
  Image,
} from 'react-native';

var SampleApp = React.createClass({
  render: function() {
    return (
      <View style={styles.container}>
        <Text>
          <Image style={styles.image} source={{uri: 'http://loremflickr.com/g/50/50/paris'}}/>
          Line 1
        </Text>
        <Text>
          <Image style={styles.image} source={{uri: 'http://loremflickr.com/g/50/50/paris'}}/>
          Line 2
        </Text>
      </View>
    );
  }
});

var styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#F5FCFF',
    marginTop: 40,
    marginHorizontal: 10,
  },
  image: {
    width: 50,
    height: 50,
  }
});

AppRegistry.registerComponent('SampleApp', () => SampleApp);

以下是它的外观：

Answer 2

@Noitidart您应该先键入文本，然后使用新行换行并在文本下方显示图像。它应该是这样的：

 <Text>
      Line 1 {'\n'}
      <Image style={styles.image} source={{uri: 'http://loremflickr.com/g/50/50/paris'}}/>
      
    </Text>