Flexbox View不会在React Native中包装Image

Question

当我在视图中使用＆＃39; flex：1＆＃39;视图不会包裹图像。

当我将代码粘贴到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);

更新

＆＃34;身高：100％＆＃34;或＆＃34; flex：1＆＃34;在最外面的容器上，而不是设置＆＃34; flex：1＆＃34;在PurchaseLine的容器上似乎工作..困惑为什么我不能设置后者...

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

Answer 1

你可以利用反应原生的＆＃34; hack＆＃34;并且将宽度定义为null ，如{width：null}。这将使其延伸至100％。另请参阅基于代码的示例here

更新：

alignSelf你在寻找什么。样本here

更新：

通过在父元素上设置flex并从子元素中删除来尝试此示例。您的父元素未定义为flex组件，因此子项存在问题。查看here

我从容器中删除了flex并添加到此处

<View style={{flex: 1}}>