Flexbox View不会将图像封装在React Native中

本文介绍了Flexbox View不会将图像封装在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/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/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 = 'cdn.shopify/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 = 'cdn.shopify/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}}>