无法更改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覆盖。希望有人能让我感到惊讶！

来源

2017-11-18 Joe Aspara

那么你想要达到的究竟是什么？ –

这实际上是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/

请记住React Native's implementation is slightly different。

来源

2017-11-18 03:32:58 designorant

完美答案的人！最后一个查询：根据文档（https://developer.mozilla.org/en-US/docs/Web/CSS/flex-shrink），flexShrink道具控制着“Flex项目将缩小以填充容器”的方式正如你所说的那样。我对此有点困惑。 –

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

回答

相关问题