1

我有一个最小的自定义无状态组件,如下所示:

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 最佳实践,但是文档没有很好地涵盖这两种情况。希望有人能给我惊喜!

4

1 回答 1

1

这实际上是 flexbox 的工作原理:

  1. Flex 容器默认带有flexShrink: 1,这意味着它们会缩小到它们的内容。添加flexShrink: 0更改。您可能需要使用minWidthandminHeight来代替。

  2. 它伸展的原因是因为没有什么可以告诉它的。您的容器已alignItems: 'stretch'覆盖默认值,alignItems: 'center'从而缩小其内容。

查看 Snack 上的示例代码:https ://snack.expo.io/B1VdUma1M

有一个非常不错的 flexbox 备忘单/playground 显示了以下行为:https ://yoksel.github.io/flex-cheatsheet/

请记住,React Native 的实现略有不同

于 2017-11-18T03:32:58.520 回答