反应原生布局行为不端

Question

我正在尝试使用 Ignite 学习 React Native。一直在与布局作斗争。 这是我的主要容器渲染功能：

render () {
return (
  <View style={styles.mainContainer}>
    <Image source={Images.background} style={styles.backgroundImage} resizeMode='stretch' />
    <View style={[styles.container]}>
      <View style={styles.section} >
        {/* <Image source={Images.ready} />*/}
        <Text style={styles.sectionText}>
          Tap to randomly choose your training task. Slack off for 5
        </Text>
      </View>

      <View style={styles.centered}>
        <TouchableOpacity onPress={this._onPressButton}>
          <Image source={Images.launch} style={styles.logo} />
        </TouchableOpacity>
      </View>
    </View>
    <View style={[styles.bottom]}>
      <View >
        <BottomBar />
      </View>
    </View>
  </View>
)
}

特别是，容器的最后一个兄弟有一个带有 BottomBar 组件的视图。底部样式是这样的：

bottom: {
      justifyContent: 'flex-end',
      marginBottom: Metrics.baseMargin
  }

BottomBar 组件：

import React, { Component } from 'react'
// import PropTypes from 'prop-types';
import { View, Text, TouchableOpacity } from 'react-native'
import styles from './Styles/BottomBarStyle'

import Icon from 'react-native-vector-icons/FontAwesome'

export default class BottomBar extends Component {
  // // Prop type warnings
  // static propTypes = {
  //   someProperty: PropTypes.object,
  //   someSetting: PropTypes.bool.isRequired,
  // }
  //
  // // Defaults for props
  // static defaultProps = {
  //   someSetting: false
  // }

  render () {
    console.tron.log('rendering my component')
    console.tron.log('Bottom bar styles: \n',styles)
    return (
      <View style={[styles.iconsContainer, styles.debugGreen]}>
        <TouchableOpacity style={[styles.icons,styles.debugYellow]} onPress={()=>{console.tron.log('rocket')}} >
          <Icon style={styles.icons} name='rocket' size={40} color='white' />
        </TouchableOpacity>
        <TouchableOpacity style={styles.button} onPress={ ()=>{console.tron.log('send')} }>
          <Icon style={styles.icons} name='send' size={40} color='white' />
        </TouchableOpacity>
      </View>
    )
  }
}

与之相关的样式：

import { StyleSheet } from 'react-native'
import DebugStyles from '../../Themes/DebugStyles'
import { Metrics } from '../../Themes/'



export default StyleSheet.create({
  ...DebugStyles,
  iconsContainer: {
    flex: 1,
    flexDirection: 'row',
    justifyContent: 'space-between',
    height: 45,
    borderRadius: 5,
    marginHorizontal: Metrics.section,
    marginVertical: Metrics.baseMargin
  },
  icons:{
    height: 45

    }

})

我遇到的问题是，如果我看到这样的圆形按钮的底部栏组件：

import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { TouchableOpacity, Text } from 'react-native'
import styles from './Styles/RoundedButtonStyles'
import ExamplesRegistry from '../Services/ExamplesRegistry'

// Note that this file (App/Components/RoundedButton) needs to be
// imported in your app somewhere, otherwise your component won't be
// compiled and added to the examples dev screen.

// Ignore in coverage report
/* istanbul ignore next */
ExamplesRegistry.addComponentExample('Rounded Button', () =>
  <RoundedButton
    text='real buttons have curves'
    onPress={() => window.alert('Rounded Button Pressed!')}
  />
)
console.tron.log('Rounded button style: ',styles)
export default class RoundedButton extends Component {
  static propTypes = {
    onPress: PropTypes.func,
    text: PropTypes.string,
    children: PropTypes.string,
    navigator: PropTypes.object
  }

  getText () {
    const buttonText = this.props.text || this.props.children || ''
    return buttonText.toUpperCase()
  }

  render () {
    console.tron.log('roundedButton styles:', styles)
    return (
      <TouchableOpacity style={styles.button} onPress={this.props.onPress}>
        <Text style={styles.buttonText}>{this.getText()}</Text>
      </TouchableOpacity>
    )
  }
}

及其风格：

import { StyleSheet } from 'react-native'
    import { Fonts, Colors, Metrics } from '../../Themes/'

    export default StyleSheet.create({
      button: {
        height: 45,
        borderRadius: 5,
        marginHorizontal: Metrics.section,
        marginVertical: Metrics.baseMargin,
        backgroundColor: Colors.fire,
        justifyContent: 'center'
      },
      buttonText: {
        color: Colors.snow,
        textAlign: 'center',
        fontWeight: 'bold',
        fontSize: Fonts.size.medium,
        marginVertical: Metrics.baseMargin
      }
    })

我得到了预期的视图：

但是，通过我的 BottomBar 组件，我得到：

需要注意的一点是，debugGreen 样式只是一个边框，它应该环绕在我的 BottomBar 组件周围，并且它显示为平面，但其中的图标呈现得更低，并且图标周围的 debugYellow 样式框显示在图标周围正如预期的那样，只是向下移动了一个整体。

Answer 1

如果您的 mainContainer 的视图是 flex : 1 或 height : 100%，您应该将子容器的 height 除以 8:2 或将 flex 除以 8:2。

示例

<View style={styles.mainContainer}> // flex: 1
  <View style={styles.container}> // flex : 0.8
...
  </View>
    <View style={styles.bottom}> // flex : 0.2
        <BottomBar />
    </View>
</View>