我有一个最小的自定义无状态组件,如下所示:
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)更重要的是 ViewBox(或您要在此处使用的每个自定义组件)的宽度和高度完全失控!分配数字大小或 Flex 值无效,并且 ViewBox 保持呈现内部文本所需的最小宽度/高度。
2)删除根视图(因此 ViewBox 成为根) ViewBox 继续忽略任何大小,但现在它填充了所有可用空间....为什么?
所有提到的行为都使用自定义视图(在本例中为 ViewBox)发生,而不是如果将其替换为普通视图,则所有工作都按预期工作。
我想知道足够多的 React-native 的 flex 和 UI 最佳实践,但是文档没有很好地涵盖这两种情况。希望有人能给我惊喜!