Question

我有3个组件，我正在尝试设置它们的高度（页眉，正文，页脚），但是当它渲染时，每个组件只有它包含的一行文本的高度。

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

我的理解是，Body应该是页眉或页脚高度的3倍。

阵营天然：

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

Answer 1

修改 Flex应该被赋予标题，正文和页脚组件的根容器。页眉，页脚和正文是自定义组件，样式道具将不适用于它们，您应用的样式只是作为 prop

传递
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> );

希望它为你工作

React-native flex height

1 个答案: