Flexbox的視圖不換形象陣營本地

Question

當我有「柔性：1」的一個視圖中的圖像視圖不換行的形象。

當我將代碼粘貼到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：

「高度：100％」 或 「柔性：1」 在最外ç ontainer，並沒有設置「柔性：1」 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

您可以使用一個react-的天然「黑客」和定義寬度爲空像{寬度：空}。這將使其延伸至100％。又見基於代碼的例子here

UPDATE：

你正在尋找alignSelf。樣品here

UPDATE：

通過設置父元素柔性試試這個例子，從子刪除。你的父母元素沒有定義爲flex組件，所以孩子有問題。檢查here

我刪除從容器中的柔性和這裏添加

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