无法在 React-native 中更改自定义组件的宽度和高度？

Question

我有一个像这样的最小自定义无状态组件：

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

这里我们至少有两个无法解释的事实：
1）更重要的是ViewBox（或者你想在这里使用的每个自定义组件）的宽度和高度完全失控！分配数字大小或 Flex 值没有效果，ViewBox 保留呈现内部文本所需的最小值 width/height。

2) 删除根 View（因此 ViewBox 成为根）ViewBox 继续忽略任何大小，但现在它填充了所有 space 可用....为什么？？？

所有提到的行为都是使用自定义视图（在本例中为 ViewBox）发生的，如果将其替换为普通视图，则一切正常。
我想知道足够多的 flex 和 UI React-native 的最佳实践，但是文档没有很好地涵盖这两种情况。希望有人能给我一个惊喜！

Answer 1

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

Flex 容器默认带有 flexShrink: 1，这意味着它们将缩小到其内容。添加 flexShrink: 0 会改变这种情况。您可能需要使用 minWidth 和 minHeight 代替。
之所以会伸长，是因为没有别的可说的。您的容器默认 alignItems: 'stretch' 被 alignItems: 'center' 覆盖，这会缩小其内容。

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

有一个非常好的 flexbox cheatsheet/playground 显示了以下行为：https://yoksel.github.io/flex-cheatsheet/

切记React Native's implementation is slightly different.

无法在 React-native 中更改自定义组件的宽度和高度？

Cannot change width and height of custom component in React-native?

react-native

flexbox

components

react-native-flexbox