Flexbox的视图不换形象阵营本地

当我有“柔性：1”的一个视图中的图像视图不换行的形象。Flexbox的视图不换形象阵营本地

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

来源

2017-09-26 LarsJK

上有反应，本地与设定宽度的小黑客：空，就是要把它延伸到100％，你尝试过那？基于你的例子这工作如预期 –

我认为更改'flexDirection'的容器可能有所帮助 – bennygenel

https://stackoverflow.com/a/33312563/205477 – Eran

您可以使用一个react-的天然“黑客”和定义宽度为空像{宽度：空}。这将使其延伸至100％。又见基于代码的例子here

UPDATE：

你正在寻找alignSelf。样品here

UPDATE：

通过设置父元素柔性试试这个例子，从子删除。你的父母元素没有定义为flex组件，所以孩子有问题。检查here

我删除从容器中的柔性和这里添加

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

来源

2017-09-26 09:32:06

谢谢，但我不想保持图像在那大小寿..我只是想查看含有红色包裹图像周围.. – LarsJK

抱歉的！检查我更新的答案中心图像的红色集装箱，希望工程 –

对不起没有让我自己清楚里面。问题右侧的图像是我真正想要的。问题是，当我在模拟器中运行相同的代码时，我得到左边的结果。 – LarsJK

Flexbox的视图不换形象阵营本地

回答

相关问题