Flexbox View不会在React Native中包装Image

当我在一个带有'flex：1'的视图中有一个Image时，View不会包装Image .

当我将代码粘贴到react-native-web-player时，它按预期工作..

正确的图像是我的预期，而左边是实际的结果：

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

import SplitView from './components/SplitView';

function PurchaseLine() {
  // tslint:disable-next-line:max-line-length
  const imgUrl =
    'https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369';
  return (
    <View style={styles.container}>
      <Image source={{ uri: imgUrl }} style={styles.img} />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: 'red'
  },
  img: {
    width: 45,
    height: 62
  }
});

export default class Datakasse extends React.Component<object, object> {
  render() {
    return (
      <View>
        <PurchaseLine />
      </View>
    );
  }
}

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

UPDATE:

最外面的容器上的“height：100％”或“flex：1”，而不是在PurchaseLine的容器上设置“flex：1”似乎工作..困惑为什么我不能设置后者...

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

import SplitView from './components/SplitView';

function PurchaseLine() {
  // tslint:disable-next-line:max-line-length
  const imgUrl =
    'https://cdn.shopify.com/s/files/1/0938/8938/products/10231100205_1_1315x1800_300_CMYK_1024x1024.jpeg?v=1445623369';
  return (
    <View style={styles.container}>
      <Image source={{ uri: imgUrl }} style={styles.img} />
      <Text>1 x Jacket</Text>
      <Text>$99.99</Text>
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    backgroundColor: 'red',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    padding: 10
  },
  img: {
    width: 45,
    height: 62
  }
});

export default class Datakasse extends React.Component<object, object> {
  render() {
    return (
      <View style={{ height: '100%', backgroundColor: 'blue' }}>
        <PurchaseLine />
      </View>
    );
  }
}

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