React-native flex height

我有3個組件，我試圖設置它們的高度（標題，正文，頁腳），但是當它呈現時，每個組件只有它包含的一行文本的高度。React-native flex height

import React from 'react'; 
import { View, Text } from 'react-native'; 
import Header from './Header'; 
import Body from './Body'; 
import Footer from './Footer'; 
import * as globalStyles from '../styles/global'; 


const HomeScreen =() => (
    <View style={{ flex: 1 }}> 
    <Header style={{ flex: 1 }} title={'MyTitle'}> 
     <Text>Component</Text> 
    </Header> 
    <Body style={{ flex: 3 }}> 
     <Text>my body</Text> 
    </Body> 
    <Footer style={{ flex: 1 }}> 
     <Text>my footer</Text> 
    </Footer> 
    </View> 
); 

export default HomeScreen;

應用

import React from 'react'; 
import { Provider } from 'react-redux'; 
import HomeScreen from './components/HomeScreen'; 
import createStore from './createStore'; 

const store = createStore(); 

export default() => (
    <Provider store={store}> 
    <HomeScreen /> 
    </Provider> 
);

部首

import React, { PropTypes } from 'react'; 
import { View, Text, StyleSheet } from 'react-native'; 
import * as globalStyles from '../styles/global'; 

const Header = ({ children, title }) => (
    <View> 
    <Text style={globalStyles.COMMON_STYLES.text}> 
     {children} 
     {title} 
     {title} 
    </Text> 
    </View> 
); 

Header.propTypes = { 
    children: PropTypes.node 
}; 

const styles = StyleSheet.create({ 
    header: { 
    paddingTop: 20 
    } 
}); 
export default Header;

頁腳

import React, { PropTypes } from 'react'; 
import { View, Text, StyleSheet } from 'react-native'; 
import * as globalStyles from '../styles/global'; 

const Footer = ({ children }) => (
    <View> 
    <Text style={globalStyles.COMMON_STYLES.text}> 
     {children} 
    </Text> 
    </View> 
); 

Footer.propTypes = { 
    children: PropTypes.node.isRequired 
}; 

const styles = StyleSheet.create({ 
    header: { 
    marginTop: 20, 
    flex: 1, 
    } 
}); 
export default Footer;

體

import React, { PropTypes } from 'react'; 
import { View, Text, StyleSheet } from 'react-native'; 
import * as globalStyles from '../styles/global'; 

const Body = ({ children, title }) => (
    <View> 
    <Text style={globalStyles.COMMON_STYLES.text}> 
     {children} 
     {title} 
     {title} 
    </Text> 
    </View> 
); 

Body.propTypes = { 
    children: PropTypes.node 
}; 

const styles = StyleSheet.create({ 
    header: { 
    marginTop: 20, 
    flex: 1, 
    } 
}); 
export default Body;

全局樣式

import { StyleSheet } from 'react-native'; 

export const BG_COLOR = '#343336'; 
export const BAR_COLOR = '#4e4d52'; 
export const TEXT_COLOR = '#e5dbda'; 
export const HEADER_TEXT_COLOR = '#fff'; 
export const MUTED_COLOR = '#8e8786'; 
export const LINK_COLOR = '#48e9d9'; 
export const ACCENT_COLORS = ['#d31d65', '#751c53', '#c248c0', '#7d6e8b', '#bbc6f7']; 

export const COMMON_STYLES = StyleSheet.create({ 
    pageContainer: { 
    backgroundColor: BG_COLOR, 
    marginTop: 0, 
    paddingTop: 5, 
    paddingHorizontal: 10 
    }, 
    text: { 
    color: TEXT_COLOR, 
    fontFamily: 'Helvetica Neue' 
    } 
});

我的理解是，身體應該是3×頁眉或頁腳的高度。

陣營母語：

react-native-cli: 2.0.1 
react-native: 0.41.2

來源

2017-04-02 Wasteland

此代碼按照您的預期正常工作。嘗試分享該屏幕的完整代碼。順便問一下你使用的是哪個版本的RN？ – Hariks

我已經添加了更多的代碼 - 儘管那裏有更多的樣式 - 我看不出它會如何幹擾高度。 – Wasteland

我在尋找的是使用HomeScreen的地方，它是否包裹在其他容器中，是否爲那些包裝容器定義了flex（如果有）？ – Hariks

編輯的Flex應給予標題，正文和頁腳組件的根容器。頁眉，頁腳和身體自定義組件，樣式道具將不會適用於他們，你申請一下就爲道具

const Footer = ({ children }) => (
    <View style={{ flex: 1 }}> // root container of footer 
    <Text style={globalStyles.COMMON_STYLES.text}> 
     {children} 
    </Text> 
    </View> 
); 

const Body = ({ children, title }) => (
    <View style={{ flex: 3 }}> 
    <Text style={globalStyles.COMMON_STYLES.text}> 
     {children} 
     {title} 
     {title} 
    </Text> 
    </View> 
); 

const Header = ({ children, title }) => (
    <View style={{ flex: 1 }}> // root container of header 
    <Text style={globalStyles.COMMON_STYLES.text}> 
     {children} 
     {title} 
     {title} 
    </Text> 
    </View> 
);

希望通過其風格爲你單獨工作

來源

2017-04-02 11:43:24 Hariks

好的。對不起 - 我需要澄清一點。 Flex應該被賦予根組件。您的意思是：）; ？另外我不確定我是否理解你的最後一句話。 – Wasteland

通過根容器的頁眉/頁腳/正文我的意思是給組件的最外層容器，即如我的答案中顯示的視圖。 Styleprops只能直接提供給本地組件。我將編輯我的答案以在代碼中添加註釋 – Hariks

HomeScreen不是本機組件，因此不需要直接給它彈性。因此，當您將style = {{flex：1}}應用於它時，它將被視爲一個道具，而在HomeScreen中，您將在控制this.props.style時獲得一個對象{flex：1}。就像您將標題傳遞給Header組件一樣。希望這可以解決您的疑問 – Hariks

React-native flex height

回答

相關問題