Flexbox View不会将图像封装在React Native中 [英] Flexbox View does not wrap Image in React Native

问题描述

当我将代码粘贴到

  import *作为反应的反应; 
从'react-native'导入{AppRegistry，View，Image，Text，StyleSheet}; 
 
从'./components/SplitView'导入SplitView; 
 
函数BuyLine（）{
 // 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}> 
<图片来源= {{uri：imgUrl}} style = {styles.img} /> 
< / View> 
）; 
 
 $ b const style = StyleSheet.create（{
 container：{
 flex：1，
 backgroundColor：'red'
} ，
 img：{
 width：45，
 height：62 
} 
}）; 
 
导出默认类Datakasse扩展了React.Component< object，object> {
 render（）{
 return（
< View> 
< PurchaseLine /> 
< / View> 
）; 
 
 
 
 AppRegistry.registerComponent（'Datakasse'，（）=> Datakasse）; 
  

更新：

最外层容器上的height：100％或flex：1，而在PurchaseLine的容器上没有设置flex：1似乎工作。困惑为什么我不能设置后者。 p>

  import *作为反应的反应; 
从'react-native'导入{AppRegistry，View，Image，Text，StyleSheet}; 
 
从'./components/SplitView'导入SplitView; 
 
函数BuyLine（）{
 // 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}> 
<图片来源= {{uri：imgUrl}} style = {styles.img} /> 
< Text> 1 x Jacket< / Text> 
< / Text> $ 99.99< / Text> 
< / View> 
）; b 
 
 
 $ b const style = StyleSheet.create（{
 container：{
 backgroundColor：'red'，
 flexDirection：'row'，
 justifyContent：'space-between'，
 alignItems：'center'，
 padding：10 
}，
 img：{
 width：45，
 height：62 
} 
}）; 
 
导出默认类Datakasse扩展了React.Component< object，object> {
 render（）{
 return（
< View style = {{height：'100％'，backgroundColor：'blue'}}> 
< > 
< / View> 
）; 
 
 
 
 AppRegistry.registerComponent（'Datakasse'，（）=> Datakasse）; 
  

解决方案

您可以使用反应原生的hack 和将宽度定义为null ，例如{width：null}。这将使其延伸至100％。请参阅示例这里根据你的代码

UPDATE： b
$ b

alignSelf你在找什么。示例 here

UPDATE：

试试这个例子，在父元素上，并从孩子中删除。你的父母元素没有定义为flex组件，所以孩子有问题。检查这里

我从容器中移除了flex并添加到这里

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

When I have an Image inside a View with 'flex: 1' the View does not wrap the Image.

When I paste my code into react-native-web-player it works as expected..

The right image is what I expected, while the left is the actual result:

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%" or "flex: 1" on the outermost container, and not setting "flex: 1" on PurchaseLine's container seems to work.. Confused why I can't set the latter tho..

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

解决方案

You can make use of a react-native "hack" and define the width as null like { width: null }. This will make it stretch at 100%. See also the example here based on your code

UPDATE:

the alignSelf what you are looking for. Sample here

UPDATE:

Try this example by setting flex on the parent element and remove from child. Your parent element wasnt defined as flex component so the child had issues. Check here

i removed the flex from container and added here

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

这篇关于Flexbox View不会将图像封装在React Native中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！