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

Question

我在视图中包装文本和图像的内容时遇到问题..

我想要的是：

--Image-Text 第 1 行

--Image-Text 第 2 行

基本上，我尝试在这种结构中编码，并将 flex 样式配置为“包装”。

-代码样式 1：

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

- 代码 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);

它看起来是这样的：