無法更改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中自定義組件的寬度和高度？

回答

相關問題