无法更改React-native中自定义组件的宽度和高度?
我有一个自定义的最小的无状态组件是这样的:无法更改React-native中自定义组件的宽度和高度?
const ViewBox = (props) => (
<View style={ mainStyle : {backgroundColor: 'beige'} }>
{props.children}
</View>
)
export default ViewBox;
所以我想导入和使用它的另一个组件中。
export default class Test extends React.Component {
render() {
return (
<View style={styles.containerView} >
<ViewBox style={styles.mainBox}>
<Text style={[styles.boxTitle, {color: '#8F468C'}]}>Lorem ipsum...</Text>
</ViewBox>
</View>
);
}
}
const styles = {
containerView: {
flex: 1,
marginTop: 50,
alignItems: 'center',
backgroundColor: 'brown',
},
mainBox: {
flex: 1,
width: 250, //No effect ! ! !
height: 250 //No effect ! ! !
},
boxTitle: {
backgroundColor: 'pink',
fontSize: 17,
marginTop: 20
}
};
在这里,我们至少有2个莫名其妙的事实:
1),更重要的是你要在这里使用视框的宽度和高度(或每定制组件)完全失控的!分配数字大小或Flex值不起作用,ViewBox保留呈现内部文本所需的最小宽度/高度。
2)删除根视图(因此视框成为根)视框继续任何规模大小忽视,但现在它填补所有可用空间....为什么???发生
所有提及的behavoirs使用自定义视图(视框在这种情况下),如果不是用普通视图代替这一切按预期工作。
我想知道React-native有足够的flex和UI最佳实践,但这两种情况并未被docs覆盖。希望有人能让我感到惊讶!
这实际上是Flexbox的工作原理是:
Flex容器默认情况下,这意味着它们将收缩其内容来与
flexShrink: 1
。添加flexShrink: 0
更改。您可能需要使用minWidth
和minHeight
。它延伸的原因是因为没有其他说明。您的容器的默认
alignItems: 'stretch'
覆盖与alignItems: 'center'
收缩其内容。
看一看示例代码的小吃:https://snack.expo.io/B1VdUma1M
有一个非常好的实现Flexbox的cheatsheet /操场能展示行为:https://yoksel.github.io/flex-cheatsheet/
完美答案的人!最后一个查询:根据文档(https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink),flexShrink道具控制着“Flex项目将缩小以填充容器”的方式正如你所说的那样。我对此有点困惑。 –
那么你想要达到的究竟是什么? –