柱內網需要半寬度反應本土基地

我使用React Native Base我的iPad應用程序，我把兩個Col組件的Grid組件這樣的內部：柱內網需要半寬度反應本土基地

<Container style={styles.container}> 
    <Header style={styles.header}> 
    <Body> 
     <Title>Header</Title> 
    </Body> 
    </Header> 
    <Content style={styles.mainContent}> 
    <Grid> 
     <Col style={styles.leftContent}> 
     </Col> 
     <Col style={styles.rightContent}> 
     </Col> 
    </Grid> 
    </Content> 
</Container>

我的樣式表是這樣的：

const styles = StyleSheet.create({ 
    container: { 
    backgroundColor: '#ccc' 
    }, 
    mainContent: { 
    marginTop: 10, 
    }, 
    header: { 
    backgroundColor: '#fff' 
    }, 
    leftContent: { 
    width: 340, 
    height: 686, 
    backgroundColor: "green", 
    marginLeft: 5, 
    }, 
    rightContent: { 
    width: 614, 
    height: 686, 
    backgroundColor: "yellow", 
    marginLeft: 10, 
    marginRight: 5, 
    },

兩個Col都採取幾乎相等的寬度不是給定的寬度。我應該如何讓這些組件採取給定的寬度？

來源

2017-08-07 sahil solanki

你試過使用flex嗎？ –

我有一個想法，你可以在你col風格使用Flex，首先是柔性父組件設置爲1，然後你可以使用0.4或0.6等，這是示例代碼添加到撓子組件您風格

const styles = StyleSheet.create({ 
    container: { 
    backgroundColor: '#ccc' 
    }, 
    mainContent: { 
    marginTop: 10, 
    flex: 1 //this is for parent style 
    }, 
    header: { 
    backgroundColor: '#fff' 
    }, 
    leftContent: { 
    flex : 0.4, //this is for width col 
    height: 686, 
    backgroundColor: "green", 
    marginLeft: 5, 
    }, 
    rightContent: { 
    flex: 0.6, //this is for width col 
    height: 686, 
    backgroundColor: "yellow", 
    marginLeft: 10, 
    marginRight: 5, 
    } 
});

希望它可以幫助你，謝謝:)

來源

2017-08-08 10:00:37

Flex爲我工作，但它是否可以使flex值爲0.614或0.34？ –

你可以嘗試設置，我認爲它應該也是工作 –

使用Flex，所以你可以給你的組件在這種情況下，具體的尺寸。將flex: 0.5 CSS屬性添加到兩個組件中，如果其設置了flex: 1，則會將它們的父母大小縮小一半。

這種方式，你可以給他們在0和1之間的具體大小比例例如：

parent: { 
    flex: 1, 
}, 
childone: { 
    flex: 0.35, 
}, 
childtwo: { 
    flex: 0.65, 
}

剛昌到任何你想要的，確定哪些組件是你的父母，哪些是孩子撓子值。

來源

2017-08-08 10:07:32

柱內網需要半寬度反應本土基地

回答

相關問題